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.
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: