レンダリングGoogleマップの指示をJavaScriptからPHP

Question

https://maps.googleapis.com/maps/api/directions/jsonに質問していますか？ PHPから2ポイント間の歩行ルートデータを取得します。取得したデータをJavaScriptマップの方向をレンダリングする関数やメソッドにそのまま渡すことは可能ですか？

おかげ

Answer 1

JavaScriptマップの指示をレンダリングする最も簡単な方法は、データを要求するGoogle Maps JavaScript API v3 DirectionsServiceを使用することです。その応答はGoogle Maps Javascript API v3 DirectionsRendererによって地図上に直接表示できます。

例：

var map; 
 

 
function initialize() { 
 
    var myOptions = { 
 
     zoom: 13, 
 
     center: new google.maps.LatLng(40.7127837, -74.0059413), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    // Create a map and center it on Manhattan. 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    // Instantiate a directions service. 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    // Create a renderer for directions and bind it to the map. 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map 
 
    }); 
 
    var start = document.getElementById("start").value; 
 
    var end = document.getElementById("end").value; 
 
    // Listen to change events from the start and end lists. 
 
    var onChangeHandler = function() { 
 
    var start = document.getElementById("start").value; 
 
    var end = document.getElementById("end").value; 
 
    calcRoute(start, end, directionsService, directionsDisplay); 
 
    }; 
 
    document.getElementById('start').addEventListener('change', onChangeHandler); 
 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
 

 
    calcRoute(start, end, directionsService, directionsDisplay); 
 
} 
 

 
function calcRoute(start, end, directionsService, directionsDisplay) { 
 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
 
    }; 
 

 
    // Route the directions and pass the response to a 
 
    // function to create markers for each step. 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } else alert("Directions request failed:" + status); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="floating-panel"> 
 
    <b>Start: </b> 
 
    <select id="start"> 
 
    <option value="penn station, new york, ny">Penn Station</option> 
 
    <option value="grand central station, new york, ny">Grand Central Station</option> 
 
    <option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option> 
 
    <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option> 
 
    <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option> 
 
    </select> 
 
    <b>End: </b> 
 
    <select id="end"> 
 
    <option value="260 Broadway New York NY 10007">City Hall</option> 
 
    <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option> 
 
    <option value="moma, New York, NY">MOMA</option> 
 
    <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option> 
 
    <option value="253 West 125th Street, New York, NY">Apollo Theater</option> 
 
    <option value="1 Wall St, New York, NY">Wall St</option> 
 
    </select> 
 
</div> 
 
<div id="map_canvas" style="width:100%;height:100%;"></div>