谷歌地图api没有在ssl上工作

Question

我正在尝试使用此代码来获取位置距离和行驶持续时间。它在localhost和非ssl连接（http）中为我工作但是当我使用ssl（https）时它没有工作。

当我在控制台看到时出现此错误：

未捕获的ReferenceError：在HTMLInputElement.onclick上没有在GetRoute（get_direction_map.php？order_id = FOOD3：357）定义google（get_direction_map.php？order_id = FOOD3：419）

这是我的代码：

                    <script type="text/javascript">
                        var source, destination;
                        var directionsDisplay;
                        var directionsService = new google.maps.DirectionsService();
                        google.maps.event.addDomListener(window, 'load', function () {
                            new google.maps.places.SearchBox(document.getElementById('txtSource'));
                            new google.maps.places.SearchBox(document.getElementById('txtDestination'));
                            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
                        });



                        function GetRoute() {
                            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
                            var mapOptions = {
                                zoom: 7,
                                center: mumbai
                            };
                            map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
                            directionsDisplay.setMap(map);
                            directionsDisplay.setPanel(document.getElementById('dvPanel'));

                            //*********DIRECTIONS AND ROUTE**********************//
                            source = document.getElementById("txtSource").value;
                            destination = document.getElementById("txtDestination").value;

                            var request = {
                                origin: source,
                                destination: destination,
                                travelMode: google.maps.TravelMode.DRIVING
                            };
                            directionsService.route(request, function (response, status) {
                                if (status == google.maps.DirectionsStatus.OK) {
                                    directionsDisplay.setDirections(response);
                                }
                            });

                            //*********DISTANCE AND DURATION**********************//
                            var service = new google.maps.DistanceMatrixService();
                            service.getDistanceMatrix({
                                origins: [source],
                                destinations: [destination],
                                travelMode: google.maps.TravelMode.DRIVING,
                                unitSystem: google.maps.UnitSystem.METRIC,
                                avoidHighways: false,
                                avoidTolls: false
                            }, function (response, status) {
                                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                                    var distance = response.rows[0].elements[0].distance.text;
                                    var duration = response.rows[0].elements[0].duration.text;
                                    var dvDistance = document.getElementById("dvDistance");
                                    dvDistance.innerHTML = "";
                                    dvDistance.innerHTML += "Distance: " + distance + "<br />";
                                    dvDistance.innerHTML += "Duration:" + duration;

                                } else {
                                    alert("Unable to find the distance via road.");
                                }
                            });
                        }
                    </script>


                    <div style="border:1px solid #ffcd44; padding:15px;">


                        <div class="table-responsive">
                        <table border="0" cellpadding="0" cellspacing="3">
                        <tr>
                            <td colspan="2">
                                Restaurent Address:
                                <input type="text" id="txtSource" class="form-control" value="<?php echo $soft_address; ?>" />
                                Customer Address :
                                <input type="text" id="txtDestination" class="form-control" value="<?php echo $address; ?>" />
                                <br />
                                <input type="button" value="Get Route" class="btn btn-success btn-block" onclick="GetRoute();" />
                                <hr />
                            </td>
                        </tr>
                        <tr>
                            <td ="2">

                                <div id="dvDistance" style="font-size:24px; color:#fe292d;">
                                </div>

                            </td>
                        </tr>
                        <tr>
                            <td>

                                <div id="dvMap" style="width: 500px; height: 500px">
                                </div>

                            </td>
                            <td>

                                <div id="dvPanel" style="width: 500px; height: 500px">
                                </div>

                            </td>
                        </tr>
                    </table>
                    </div>

所以我想使用ssl和非ssl连接。提前感谢大家

Answer 1

使用新版本Api解决了这个问题:)