PHPとMySQLを使用してルートを取得するGoogle Maps API

Question

私のデータベースに保存されている目的地の走行ルートをGoogleマップで自動的に設定しようとしています。基本的に私のデータベースにはいくつかの住所があります（メーカー：）。郵便番号（または住所）を入力して、その郵便番号/住所から入手可能なすべての製造業者に向けることができるようにしたい余分な工夫、一番近いメーカーの取り出し）。以前はGoogle Maps APIを使用したことがないので、かなり混乱しています。これまでは、使用可能なメーカーにのみマーカーを設定できました。運転ルートについては、私は何時間も探しましたが、消化するのはちょっと複雑です。私はこれまでに持っていたこのコードをどうやって取るように提案しましたか？

echo "<script> 
     var locations = 
     [ 
     "; 
      for($i = 0; $i < sizeof($locations); $i++) 
      { 
       echo "['".$locations[$i][0]."', '".$locations[$i][1]."', ".$locations[$i][2].", ".$locations[$i][3].", ". ($i+1) ." ]"; 
       if (! ($i == (sizeof($locations)-1))) 
        echo ","; 
      } 
     echo "]; 

     var map = new google.maps.Map(document.getElementById('map'), 
     { 
      zoom: 15, 
      center: new google.maps.LatLng(45.892235, -72.5371626), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var infowindow = new google.maps.InfoWindow(); 

     var marker, i; 

     for (i = 0; i < locations.length; i++) 
     { 
      marker = new google.maps.Marker(
      { 
       position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
       map: map 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) 
      { 
       return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
      })(marker, i)); 
     } 
</script>"; 

Answer 1

ここでは、あなたの問題に対する最初の回答があります。

jQuery(document).ready(function(){ 
 

 
    var locations = [ 
 
    ["a","Title A",46.3,-72.5], 
 
    ["b","Title B",45.9,-72.4], 
 
    ["c","Title C",45.6,-72.1] 
 
    ] ; 
 

 
    var map = new google.maps.Map(
 
    document.getElementById('map'), 
 
    { 
 
     zoom: 7, 
 
     center: new google.maps.LatLng(45.892235, -72.5371626), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
); 
 

 
    jQuery(locations).each(function(k,v) { 
 
    
 
    locations[k].push('what s in index 4 ?') ; // Push in index 4 
 
    
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(v[2],v[3]), 
 
     map: map, 
 
     title: v[1] 
 
    }) 
 
    locations[k].push(marker) ; 
 

 
    }) ; 
 

 
    var directionsService = new google.maps.DirectionsService; 
 
    var directionDisplays = [] ; // We need to store displays to be abled to remove them on each "getRoute" click. 
 

 
    document.getElementById('getRoutes').addEventListener('click', getRoutes); 
 

 
    function getRoutes() { 
 

 
    \t // Removing existing routes if any 
 
    for (i = 0 ; i < directionDisplays.length ; i++) 
 
     directionDisplays[i].setMap(null) ; 
 

 
    directionDisplays = [] ; 
 

 
    // Now the important part : for each location we look for the route 
 
    jQuery(locations).each(function(k,v) { 
 
    \t 
 
    \t directionsService.route({ 
 
     \t origin: document.getElementById('whereami').value, 
 
      \t destination: new google.maps.LatLng(v[2],v[3]) , 
 
      \t travelMode: 'DRIVING' 
 
     }, function (response, status) { 
 
      if (status === 'OK') { 
 
      \t // This callback is call asynchronous, this is probably why it's complicated to access locations[k] 
 
      var directionsDisplay = new google.maps.DirectionsRenderer ; 
 
      directionsDisplay.setMap(map) ; 
 
      // We remove the marker "B" added by directionsDisplay. 
 
      directionsDisplay.setOptions({ suppressMarkers: true }); 
 
      directionsDisplay.setDirections(response); 
 
      directionDisplays.push(directionsDisplay) ; 
 
      var point = response.routes[ 0 ].legs[ 0 ]; 
 

 
      // We affect the direction to the marker to make it accessible later 
 
      locations[k][5].duration = point.distance.text ; 
 

 
      // And know we just have to add a listener. 
 
\t \t  locations[k][5].addListener('click',function(){ 
 
\t \t  \t console.log(this.title,this.duration) ; 
 
\t \t  }) ; 
 

 
      } else { 
 
      window.alert('Directions request failed due to ' + status); 
 
      } 
 
     } 
 
    ); 
 
    }) ; 
 
    } 
 

 
}) ;

div#map { 
 
width:50% ; 
 
height:250px ; 
 
float:left ; 
 
} 
 

 
div#boutons { 
 
float:right; 
 
width:200px ; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div> 
 
<div id="boutons"> 
 
    <input type="text" id="whereami" value="Ottawa" /> 
 
    <button id="getRoutes">get routes</button> 
 
</div>

なぜ私はまさにそれだろう場所アレーhttp://php.net/manual/es/function.json-encode.php