Googleマップapiがsslで動作していない

Question

私はlocalhostとnon-ssl接続（http）でperfetly私のために働く場所の距離と運転時間を取得するこのコードを試していますしかし、私はssl（https）を使用してdidnt仕事。

と私はコンソールで見たとき、私はこのエラーを得た：GetRoute（？get_direction_map.phpたorder_id = FOOD3：357）で、Googleが定義されていない ：

キャッチされないにReferenceError HTMLInputElement.onclickで （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 connectiの両方で動作するようにしたいですon。新しいバージョンのAPIを使用して、すべての

Answer 1

へ 事前のおかげで、この問題を解決:)

を