Google Maps - Route einblenden

[bodo92]

Guten Abend,

ich habe mir mittels der Google Maps API eine Karte eingebunden in der die Einsatzstelle eingetragen wird.
Jetzt würde ich mir gerne die Fahrtroute und die Entfernung einblenden lassen, fand in der Dokumentation nur eine Möglichkeit eine Linie von MarkerA nach MarkerB zu zeichnen die zeichnet jedoch gerade eine Verbindung und nicht die Route.

Hier der Link zur Map: http://feuerwehr.ebelmxi.de/einsaetze/details/1


Danke Vorab

 

[Cheffchen]

Hallo,

reichen die Beispiele nicht wie diese, da ja nur standard brauchst ohne extra kram.
direction ist das zauberwort.
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

Cheffchen

 

[bodo92]

Sieht schon sehr vielversprechend aus, werde das gleich mal testen.

Vielen lieben Dank für die schnelle Antwort :)

 

[bodo92]

Hab soweit alles zu meiner Zufriedenheit gelöst :)

Hier das Script falls jemand ähnliche Wünsche verfolgt und das hier Findet:

<script type="text/javascript">
    var directionsDisplay;
    var directionsService;

    function initializeMap() {
        var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(<?= $this->data['einsatz']['breitengrad'] ?>, <?= $this->data['einsatz']['laengengrad'] ?>)
        };

        var map = new google.maps.Map(document.getElementById('map_a'), mapOptions);

        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer({
            suppressMarkers: true,
            map: map
        });

        var geraetehausmarker = new google.maps.Marker({
            position: new google.maps.LatLng(49.555917, 10.714925),
            map: map
        });

        var einsatzortcircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.3,
            map: map,
            center: new google.maps.LatLng(<?= $this->data['einsatz']['breitengrad'] ?>, <?= $this->data['einsatz']['laengengrad'] ?>),
            radius: 75
        });
    }

    function calcRoute() {
        var request = {
            origin:'49.556170,10.715177',
            destination:'<?= $this->data['einsatz']['breitengrad'] ?>,<?= $this->data['einsatz']['laengengrad'] ?>',
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    function initialize() {
        initializeMap();
        calcRoute();
    }

    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
    }

    window.onload = loadScript();
</script>

Die API wird Asynchron eingebunden daher habe ich die Funktion initialize() erstellt die dann initializeMap() und calcRoute() aufruft, da nur ein Callback ausgeführt wird.


Danke nochmal für den Hinweis, die API Doku ist einfach zu groß ;)