Google-Maps API für Routen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
code
cursor
datenmenge
datum
deutsche zeichen
einstellung
fadenkreuz
fix eingetragene route
frage
image
karte
koordinate
mache
mittelpunkt
parameter
pointer
route
stadt
url
-
Hallo
ich habe einen Code, der eine Google-Map (mit Route) anzeigt,
das klappt auch grundsätzlich ganz gut, aber ich habe einige Fragen,
zu denen ich auch nach 2 Stunden Googeln keine Antworten gefunden habe
hier der Code:
<!DOCTYPE html> <html> <head> <title>Google-Maps - Route Example</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style type="text/css"> <!-- body { font-family:Arial; font-size:14px; color:#000000; } --> </style> </head> <body> <h2>Google Maps JavaScript API v3 Example: Directions Complex</h2> <p>ROUTE: <i>Berlin</i> --> <i>Dresden</i> --> <i>Leipzig</i> --> <i>Hannover</i> --> <i>Paris</i> </p> <br> <br> <div id="map" style="width: 520px; height: 410px;"></div> <div id="duration">Duration: </div> <div id="distance">Distance: </div> <script type="text/javascript"> var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var myOptions = { zoom: 6, // mapTypeId: google.maps.MapTypeId.TERRAIN // mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: google.maps.MapTypeId.HYBRID // mapTypeId: google.maps.MapTypeId.SATELLITE } var map = new google.maps.Map(document.getElementById("map"), myOptions); directionsDisplay.setMap(map); var request = { origin: 'Berlin', destination: 'Paris', waypoints: [ { location:'Dresden', stopover:true }, { location:'Leipzig', stopover:true }, { location:'Hannover', stopover:true }, ], provideRouteAlternatives: false, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC // unitSystem: google.maps.UnitSystem.IMPERIAL }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { // Display the distance: document.getElementById('distance').innerHTML += response.routes[0].legs[0].distance.value + " meters" + " --- (" + response.routes[0].legs[0].distance.text + ")"; // Display the duration: document.getElementById('duration').innerHTML += response.routes[0].legs[0].duration.value + " seconds" + " --- (" + response.routes[0].legs[0].duration.text + ")"; directionsDisplay.setDirections(response); } }); </script> <br> <br> <br> </body> </html>
hier die Fragen:
a) Zoom Einstellung ... egal welchen Wert ich setze, der Zoom der Karte ist immer gleich
der wird anscheinend automatisch angepasst, aber was, wenn ich die Route von "weiter weg" also Zoom kleiner haben will ?!
b) Route über Stadt mit Umlaut .. wie z.B. Köln
... egal was ich mache, ob Köln oder utf8_encode('Köln') oder urlencode('Köln') oder Köln
bei nichts davon bekomme ich eine Karte .... wie mache ich meine Route über Köln (über Stadt mit Umlaut) ???
also für neuen Wegpunkt: ...
.... aber in welcher codierung?{ location:'Köln', stopover:true }
c) kann ich die Map mit der Route auch einfach als Image bekommen,
also nicht als JS (JSON) sondern als Bild jpg/png/ ... egal welches Format ?
denn die JSON Datem-Menge ist extrem ? ... für so ne einfache route ?!
habe mal die JSON Daten von respone als Debug ausgegeben
das ist Wahhhhhhnsinn ... Mega-Viel ... zuuuu viel ...
ich hoffe Ihr könnt mir helfen
Danke !
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hey
Ich denk mal der Zoom wird automatisch angepasst, du könntest allerdings eine Zoomfunktion einbauen, indem du Buttons nimmst, welche mitmap.zoomIn(); map.zoomOut;
verwendest. Ich kann mir gut vorstellen, dass Google hier automatisch reguliert. Ich habe selbst mit GMaps noch nicht gearbeitet, aber wer weiß. Hast du den zoomlvl denn schonmal auf 0 gesetzt als Beispiel, um zu schauen, ob zumindest die ganze Welt angezeigt wird?
Und statt Köln schreibt man Koeln. Du nutzt die deutsche Umschreibung für deutsche Zeichen. Da wird aus ä=>ae , ö=>oe und ü=>ue . Damit sollte es funktionieren.
Die JSON Datenmenge ist nicht extrem, das ist nur ein einfacher Text. Aber es müssen ja auch die Bilder, also die "Tiles" geladen werden. Ohne diese kann man nichts anzeigen. Und diese dürften ein wenig traffic brauchen. Du kannst aber auch nur ein Image laden, indem du wie hier in der Doku steht vorgehst: https://developers.google.com/maps/documentation/staticmaps/
Damit erstellst du dir einen Link, in welchem du alle Parameter mitsendest, und du kriegst dann ein Bild, welches du einfach als img-Tag source benutzen kannst.
Ich hoffe das hilft dir weiter :)
Liebe Grüße -
Sanus!
Ich verwende das System zwar nicht für eine fix eingetragene Route, sondern lediglich um Koordinaten auszulesen, aber dennoch funktioniert es:
anstatt myOptions zu definieren, probiers mal so:
Deinen code
ändere mal durch diesen:var map = new google.maps.Map(document.getElementById("map"), myOptions); directionsDisplay.setMap(map);
Die Zahl 5 (nach den Koordinaten, welche den Mittelpunkt der Karte ergeben) entspricht dem Zoomlevel und kann natürlich beliebig geändert werden...// erstellen und zentrieren der Karte und Cursor als Fadenkreuz var map = new GMap2(document.getElementById("map"), {draggableCursor:'crosshair', draggingCursor: 'pointer'}); map.setCenter(new GLatLng(48.83579746243, 6.2841796875), 5); // Zoomfunktion und Navigation auf der linken Kartenseite map.addControl(new GLargeMapControl()); // Kontrollelemente des Kartentyps (Straßenansicht, Satelit oder Hybrid) map.addControl(new GMapTypeControl()); -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
