Render Google Maps Richtungen in JavaScript von PHP

Question

Ich frage https://maps.googleapis.com/maps/api/directions/json? Routen Daten zwischen 2 Punkten von PHP zu bekommen. Ist es möglich, die erhaltenen Daten an eine Funktion oder Methode zu übergeben, die die Richtungen in einer JavaScript-Map darstellen würde?

Dank

Answer 1

Der einfachste Weg Richtungen in einer JavaScript-Karte zu machen ist, die Google Maps JavaScript API v3 DirectionsService zu verwenden, um die Daten zu verlangen. Die Antwort von dieser kann direkt auf der Karte von der Google Maps Javascript API v3 DirectionsRenderer gerendert werden.

Beispiel:

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>