Google Maps – route is not defined

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
ich versuche gerade einen Routenplaner per Google Maps einzubauen. Die Map wird auch richtig mit marker geladen und das InfoFenster geht auch auf, wenn auch erst auf den zweiten Klick auf den Marker, warum weiß ich auch noch nicht.
Aber wenn ich versuche das Formular für den Startpunkt abzuschicken bekomme ich die Fehlermeldung das die Funktion 'Route' nicht definiert wäre.
Ich muss irgendwie die Function route falsch aufrufen. Hat einer vielelicht mehr Erfahrung mit Google Maps API und kann sich das mal anschauen und mir hoffentlich sagen was ich falsch mache?

Siehe Zeile 262.

Javascript:
var map;
var styledMapType;

function initMap(){
    // loadJSON(function(response) {
    //     loaded_json = JSON.parse(response);
    //     styledMapType = new google.maps.StyledMapType(loaded_json, {name: 'Map'});
    // });

    var contentString = '<div id="content">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">Heidelberg</h1>'+
                        '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Wappen_Heidelberg.svg/280px-Wappen_Heidelberg.svg.png" width="50px" style="margin-bottom: 10px;" class="col-md-3">' +
                        '<div id="bodyContent" class="col-md-8">'+
                        '<strong>Heidelberg</strong> [ˈhaɪdəlbɛʁk] ist eine Großstadt in Baden-Württemberg im Südwesten Deutschlands, am Neckar gelegen, wo dieser den Odenwald verlässt und in die Oberrheinebene eintritt. Die ehemalige kurpfälzische Residenzstadt ist bekannt für ihre malerische Altstadt mit der Schlossruine sowie für ihre renommierte Universität, die älteste Hochschule auf dem Gebiet des heutigen Deutschlands. Sie zieht Wissenschaftler und Besucher aus aller Welt an.' +
                        'Mit über 150.000 Einwohnern ist Heidelberg die fünftgrößte Stadt des Bundeslandes. Sie ist Stadtkreis und zugleich Sitz des umliegenden Rhein-Neckar-Kreises. Das dicht besiedelte Rhein-Neckar-Gebiet, in dem Heidelberg gemeinsam mit den Großstädten Mannheim und Ludwigshafen liegt, wird als Metropolregion Rhein-Neckar bezeichnet.</p>'+
                        '<p>Attribution: Heidelberg, <a href="https://de.wikipedia.org/wiki/Heidelberg">'+
                        'https://de.wikipedia.org/wiki/Heidelberg</a> '+
                        '</p>'+
                        '</div>'+
                        '</div>';

    var routeForm = '<div id="content">'+
                   '<h2 style="margin-top:0px;" class="firstHeading">Router hierher berechnen</h2>'+
                   '<form onsubmit="route(false); return false;">'+
                   '<div class="form-group clearfix" style="margin-bottom: 20px;">'+
                   '<label class="sr-only" for="departure">Von:</label>'+
                   '<input type="text" placeholder="Startort eingeben" name="departure" class="form-control col-xs-12" id="departure" value="">'+
                   '</div>'+
                   '<span class="pull-left"><a href="javascript:route(false);">In neuem Fenster öffnen</a></span>'+
                   '<span class="pull-right"><a href="javascript:route(true);" class="btn btn-primary">Los</a></span>'+
                   '</form>'+
                   '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: routeForm
    });

    var icon = {
        url: "assets/svg/marker.svg",
        fillColor: '#f7b917',
        anchor: new google.maps.Point(25,50),
        scaledSize: new google.maps.Size(50,50)
    };

    var geocoder = new google.maps.Geocoder();

    $.getJSON('assets/js/markers.json', {
       format: 'json'
    })
    .done(function(json) {
        $.each(json, function(key, data) {
            var hamburg = new google.maps.LatLng(data.latitude, data.longitude);

            // Creating a marker and putting it on the map
            var markers = new google.maps.Marker({
                position: hamburg,
                map: map,
                icon: icon
                // title: data.name
            });

            if ($('#map').length) {
                var map = new google.maps.Map(document.getElementById('map'), {
                center: hamburg,
                zoom: 17,
                mapTypeId: 'roadmap',
                styles: [{
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#f5f5f5"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.icon",
                            "stylers": [
                              {
                                "visibility": "off"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#616161"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.text.stroke",
                            "stylers": [
                              {
                                "color": "#f5f5f5"
                              }
                            ]
                          },
                          {
                            "featureType": "administrative.land_parcel",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#bdbdbd"
                              }
                            ]
                          },
                          {
                            "featureType": "poi",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#eeeeee"
                              }
                            ]
                          },
                          {
                            "featureType": "poi",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#757575"
                              }
                            ]
                          },
                          {
                            "featureType": "poi.park",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#e5e5e5"
                              }
                            ]
                          },
                          {
                            "featureType": "poi.park",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#9e9e9e"
                              }
                            ]
                          },
                          {
                            "featureType": "road",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#ffffff"
                              }
                            ]
                          },
                          {
                            "featureType": "road.arterial",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#757575"
                              }
                            ]
                          },
                          {
                            "featureType": "road.highway",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#dadada"
                              }
                            ]
                          },
                          {
                            "featureType": "road.highway",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#616161"
                              }
                            ]
                          },
                          {
                            "featureType": "road.local",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#9e9e9e"
                              }
                            ]
                          },
                          {
                            "featureType": "transit.line",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#e5e5e5"
                              }
                            ]
                          },
                          {
                            "featureType": "transit.station",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#eeeeee"
                              }
                            ]
                          },
                          {
                            "featureType": "water",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#c9c9c9"
                              }
                            ]
                          },
                          {
                            "featureType": "water",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#9e9e9e"
                              }
                            ]
                          }
                        ]
                });
            }

            markers.setMap(map);
            markers.addListener('click', toggleBounceOpenWindow);

            function toggleBounceOpenWindow() {
                if (markers.getAnimation() !== null) {
                    markers.setAnimation(null);
                }
                else {
                    markers.setAnimation(google.maps.Animation.BOUNCE);
                    infowindow.open(map, markers);
                }
            }

            // function drop() {
            //     clearMarkers();
            //     for (var i = 0; i < neighborhoods.length; i++) {
            //         addMarkerWithTimeout(neighborhoods[i], i * 200);
            //     }
            // }
            //
            // function addMarkerWithTimeout(position, timeout) {
            //     window.setTimeout(function() {
            //         markers.push(new google.maps.Marker({
            //             position: position,
            //             map: map,
            //             animation: google.maps.Animation.DROP
            //         }));
            //     }, timeout);
            // }

            /* Map Route */
            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();

            function route(SameWindow) {
                if (SameWindow) {
                    directionsService.route({
                        origin: document.getElementById('departure').value,
                        destination: new google.maps.LatLng(53.5517954, 10.000991399999975),
                        travelMode: google.maps.TravelMode.DRIVING
                    },
                    function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setMap(map);
                            directionsDisplay.setDirections(response);
                        }
                    });
                } else {
                    window.open("http://maps.google.de/maps?saddr=53.5517954,10.000991399999975" + "&daddr=" + document.getElementById("departure").value, '_blank');
                }
            }

        });
    });
}
 
Zuletzt bearbeitet:
Ich habe zwar nur wenig Erfahrung mit der Google-Maps-API, aber eines fällt schnell auf: Du registrierst den Eventlistener mit dem Aufruf von route() inline:
Code:
onsubmit="route(false); return false;"
Wenn ich mich richtig erinnere, muss in dem Fall die Funktion im globalen Scope sichtbar sein.
Lösung kann ich nicht anbieten, ist etwas kompliziert, weil dieses Formular dynamisch angelegt wird. route() einfach global anlegen, geht sicher nicht, weil darin auf directionService.route zugegriffen wird, das ebenfalls wahrscheinlich global nicht sichtbar ist.
 
Was meinst Du mit "abfrage", meinst Du den Listener registrieren? Im Prinzip ja, aber es ist nicht so einfach, weil Du zunächst mal nur das HTML als String anlegst und dieses zunächst nicht im DOM ist. Ich habe es in der Zwischenzeit ein wenig untersucht mit dem Ergebnis, dass die Elemente erst im DOM sind, wenn der Marker zum ersten Mal mit infowindow.open sichtbar gemacht wurde. Das bedeutet, Du müsstest den Eventlistener danach registrieren, etwa so und ungetestet:
Code:
           function toggleBounceOpenWindow() {
                if (markers.getAnimation() !== null) {
                    markers.setAnimation(null);
                }
                else {
                    markers.setAnimation(google.maps.Animation.BOUNCE);
                    infowindow.open(map, markers);
                    document.querySelector("#content form").addEventListener("submit", function() {
                        route(true); // bin nicht so weit eingestiegen, um diesen Parameter zu verstehen
                    });
                }
            }
 
Danke für Deine Hilfe.
Mit jQuery habe ich es recht einfach hinbekommen.

Code:
$(document).on('click', '#routeTrue', function(){
    route(true);
})

Grüße
 
Ja auf diese Weise kann man einem dynamisch hinzugefügten Element ein Event zuweisen in jQuery. Funktioniert recht gut. Hatte da aber auch schon Situationen wo es nicht funktioniert hat.

So jetzt muss ich noch die Routenlinie einfärben und irgendwie herausbekommen warum ich den Marker zweimal anklicken muss.
 
Hier nochmal mein endgültiges Script wo ich auch noch die Linie eingefärbt habe und noch das Bouncing beim schließen des InfoWindow beende:


Javascript:
var map;
var styledMapType;

function initMap(){
    // loadJSON(function(response) {
    //     loaded_json = JSON.parse(response);
    //     styledMapType = new google.maps.StyledMapType(loaded_json, {name: 'Map'});
    // });

    var contentString = '<div id="content">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">Heidelberg</h1>'+
                        '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Wappen_Heidelberg.svg/280px-Wappen_Heidelberg.svg.png" width="50px" style="margin-bottom: 10px;" class="col-md-3">' +
                        '<div id="bodyContent" class="col-md-8">'+
                        '<strong>Heidelberg</strong> [ˈhaɪdəlbɛʁk] ist eine Großstadt in Baden-Württemberg im Südwesten Deutschlands, am Neckar gelegen, wo dieser den Odenwald verlässt und in die Oberrheinebene eintritt. Die ehemalige kurpfälzische Residenzstadt ist bekannt für ihre malerische Altstadt mit der Schlossruine sowie für ihre renommierte Universität, die älteste Hochschule auf dem Gebiet des heutigen Deutschlands. Sie zieht Wissenschaftler und Besucher aus aller Welt an.' +
                        'Mit über 150.000 Einwohnern ist Heidelberg die fünftgrößte Stadt des Bundeslandes. Sie ist Stadtkreis und zugleich Sitz des umliegenden Rhein-Neckar-Kreises. Das dicht besiedelte Rhein-Neckar-Gebiet, in dem Heidelberg gemeinsam mit den Großstädten Mannheim und Ludwigshafen liegt, wird als Metropolregion Rhein-Neckar bezeichnet.</p>'+
                        '<p>Attribution: Heidelberg, <a href="https://de.wikipedia.org/wiki/Heidelberg">'+
                        'https://de.wikipedia.org/wiki/Heidelberg</a> '+
                        '</p>'+
                        '</div>'+
                        '</div>';

    var routeForm = '<div id="content">'+
                   '<h2 class="firstHeading">Route berechnen</h2>'+
                   '<form onsubmit="route(false); return false;">'+
                   '<div class="form-group clearfix" style="margin-bottom: 20px;">'+
                   '<label class="sr-only" for="departure">Von:</label>'+
                   '<input type="text" placeholder="Startort eingeben" name="departure" class="form-control col-xs-12" id="departure" value="">'+
                   '</div>'+
                   '<span class="pull-left"><a id="routeFalse">In neuem Fenster öffnen</a></span>'+
                   '<span class="pull-right"><a class="btn btn-primary" id="routeTrue">Los</a></span>'+
                   '</form>'+
                   '</div>';

    var infoWindow = new google.maps.InfoWindow({
        content: routeForm
    });

    var icon = {
        url: "assets/svg/marker.svg",
        fillColor: '#f7b917',
        anchor: new google.maps.Point(25,50),
        scaledSize: new google.maps.Size(50,50)
    };

    var geocoder = new google.maps.Geocoder();

    $.getJSON('assets/js/markers.json', {
       format: 'json'
    })
    .done(function(json) {
        $.each(json, function(key, data) {
            var hamburg = new google.maps.LatLng(data.latitude, data.longitude);

            // Creating a marker and putting it on the map
            var markers = new google.maps.Marker({
                position: hamburg,
                map: map,
                icon: icon
                // title: data.name
            });

            if ($('#map').length) {
                var map = new google.maps.Map(document.getElementById('map'), {
                center: hamburg,
                zoom: 17,
                mapTypeId: 'roadmap',
                styles: [{
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#f5f5f5"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.icon",
                            "stylers": [
                              {
                                "visibility": "off"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#616161"
                              }
                            ]
                          },
                          {
                            "elementType": "labels.text.stroke",
                            "stylers": [
                              {
                                "color": "#f5f5f5"
                              }
                            ]
                          },
                          {
                            "featureType": "administrative.land_parcel",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#bdbdbd"
                              }
                            ]
                          },
                          {
                            "featureType": "poi",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#eeeeee"
                              }
                            ]
                          },
                          {
                            "featureType": "poi",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#757575"
                              }
                            ]
                          },
                          {
                            "featureType": "poi.park",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#e5e5e5"
                              }
                            ]
                          },
                          {
                            "featureType": "poi.park",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#9e9e9e"
                              }
                            ]
                          },
                          {
                            "featureType": "road",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#ffffff"
                              }
                            ]
                          },
                          {
                            "featureType": "road.arterial",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#757575"
                              }
                            ]
                          },
                          {
                            "featureType": "road.highway",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#dadada"
                              }
                            ]
                          },
                          {
                            "featureType": "road.highway",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#616161"
                              }
                            ]
                          },
                          {
                            "featureType": "road.local",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#9e9e9e"
                              }
                            ]
                          },
                          {
                            "featureType": "transit.line",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#e5e5e5"
                              }
                            ]
                          },
                          {
                            "featureType": "transit.station",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#eeeeee"
                              }
                            ]
                          },
                          {
                            "featureType": "water",
                            "elementType": "geometry",
                            "stylers": [
                              {
                                "color": "#c9c9c9"
                              }
                            ]
                          },
                          {
                            "featureType": "water",
                            "elementType": "labels.text.fill",
                            "stylers": [
                              {
                                "color": "#9e9e9e"
                              }
                            ]
                          }
                        ]
                });
            }

            markers.setMap(map);

            markers.addListener('click', function() {
                if(!markers.open){
                    infoWindow.open(map, markers);
                    markers.setAnimation(google.maps.Animation.BOUNCE);
                    markers.open = true;
                }
                else {
                    infoWindow.close();
                    markers.setAnimation(null);
                    markers.open = false;
                }

                map.addListener('click', function() {
                    infoWindow.close();
                    markers.setAnimation(null);
                    markers.open = false;
                });
            });

            google.maps.event.addListener(infoWindow, 'closeclick', function() {
                infoWindow.close();
                markers.setAnimation(null);
                markers.open = false;
            });

            // function drop() {
            //     clearMarkers();
            //     for (var i = 0; i < neighborhoods.length; i++) {
            //         addMarkerWithTimeout(neighborhoods[i], i * 200);
            //     }
            // }
            //
            // function addMarkerWithTimeout(position, timeout) {
            //     window.setTimeout(function() {
            //         markers.push(new google.maps.Marker({
            //             position: position,
            //             map: map,
            //             animation: google.maps.Animation.DROP
            //         }));
            //     }, timeout);
            // }

            /* Map Route */
            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: { strokeColor: '#f7b917' }});

            $(document).on('click', '#routeTrue', function(){
                route(true);
            })

            $(document).on('click', '#routeFalse', function(){
                route(false);
            })

            function route(SameWindow) {
                if (SameWindow) {
                    directionsService.route({
                        origin: document.getElementById('departure').value,
                        destination: new google.maps.LatLng(53.5517954, 10.000991399999975),
                        travelMode: google.maps.TravelMode.DRIVING
                    },
                    function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setMap(map);
                            directionsDisplay.setDirections(response);
                        }
                    });
                } else {
                    window.open("http://maps.google.de/maps?saddr=53.5517954,10.000991399999975" + "&daddr=" + document.getElementById("departure").value, '_blank');
                }
            }

        });
    });
}
 
Zurück