Routenplaner mit Google Maps
Eingetragen von marcusx (16)am 01.07.2010 - 11:54 Uhr in
Hallo!
Ich möchte auf einer Anfahrtsbeschreibungseite zusätzlich einen Google Maps Routenplaner einbauen. Was wäre denn da eine elegante Lösung?
Ich habe so einen Routenplaner mal für eine statische Seite gebaut und könnte das JavaScript von damals vielleicht einfach ins Template einbinden und das notwendige Markup direkt als ungefiltertes HTML in den Content schreiben. Find ich irgendwie doof.
Gibt es kein Routenplanermodul? Ich hab keins gefunden.
Gmap bringt mich auch nicht weiter, oder? Es ist glaub ich nur dafür gedacht Geodaten zu speichern und auf Karten anzuzeigen. Für einen Routenplaner der nur auf einer einzigen Seite angezeigt werden soll hilft mir das nicht weiter vermute ich.
Hat mal jemand einen Tipp für mich? Danke!
VG, Marcus
- Anmelden oder Registrieren um Kommentare zu schreiben
Hilft dir das?
am 29.07.2010 - 13:24 Uhr
google-maps-routenplanung-mit-jquery-plugin
Kannte ich schon - Danke!
am 29.07.2010 - 14:02 Uhr
Das hab ich mir auch angeschaut. Das jQuery Plugin unterstuetzt aber nicht die neue v3 API von Google Maps. Ich hab mich inzwischen aber mit den Routenplanerfunktionen der Maps API beschäftigt. Das ist alles viel weniger wild als ich anfangs dachte. Da spart man sich auch nicht viel Arbeit wenn es jetzt ein jQuery PlugIn dafür gäbe. Ich hab inzwischen ein Script geschrieben das die Karte anzeigt und auch Routenplanen kann. Ist ganz kurz wenn man mal die Zeit hatte sich mit der Google API auseinaderzusetzen und die etwas verstecketen Beispiel von Google findet.
Wärst Du bereit, dass Script
am 05.10.2010 - 01:52 Uhr
Wärst Du bereit, dass Script rauszurücken ? *lieb.guck*
Ich suche auch schon verzweifelt, einen Routenplaner in ein Projekt zu fummeln, aber bisher scheiterten alle Versuche :(
Cheers
Skull
GMap Blocks
am 05.10.2010 - 10:44 Uhr
Hallo,
vielleicht ist GMap Blocks dafür geeignet. Das ist ein etwas einfacheres Modul als das "große" GMaps-Modul. Dort kann man in den Info-Windows für die angezeigte Adresse / den Marker auch das Google-Directions aktivieren. Einfach mal testen.
Gruß,
Sven
www.allsatis.de
Routenplaner script
am 20.10.2010 - 14:25 Uhr
Hi Scull!
Bist Du noch an dem Script interessiert? Ich habe aus unerfindlichen gründen erst heute eine Nachricht bekommen das jemand in meinen Thread gepostet hat.
VG
Marcus
So hab ich es jetzt gemacht
am 11.02.2011 - 10:25 Uhr
Hi!
Wegen diverser Nachfragen jetzt mal der Weg wie ich es gemacht habe. Nicht so elegant wie das vielleicht sein sollte, aber es funktioniert.
Wir brauchen folgende Sachen:
Zunächst mal zum Markup auf unserer Routenplanerseite. Der Routenplaner wird bei mir einfach im Content angezeigt. Deswegen habe ich das notwendige HTML einfach in den Body geschrieben. Dazu habe ich einen neuen Input Type angelegt in dem alle Filter ausgeschaltet sind, damit ich da reinschreiben kann was ich will ohne das es bei der Ausgabe durch Drupal entfernt wird.
<!-- add your content here -->
<div id="routenplaner_direction_controlls">
<strong> Von: </strong><input type="text" id="origin_text" /> <strong>Nach: </strong><span id="destination_text">Unser Ziel der Route</span> <a id="routeberechnen" href="#">Route berechnen</a>
</div><!-- END routenplaner_direction_controlls -->
<br>
<div id="routenplaner_map" ></div>
<div id="routenplaner_directions"></div>
Dann die Google Maps API auf diesen Nodes laden. Bei mir sind das 3. Dazu die Node ID merken.
Da add_js in D6 keine externen Scripte einbinden kann lasse ich das abhängig von der Node ID hart ins Template reinschreiben. Nicht so geil, das muss auch besser gehen aber so funktioniert es erst mal.
In der template.php habe ich folgende funktion drin. Hier die Node ids eintragen wo man die API braucht
<?php
function templatename_add_mapapi ($nid) {
//Load Google Maps API in the Routenplaner nodes, hier sind das die nodes 32, 28, etc wir wollen ja nicht ueberall die maps api laden, sind diesselben nodes die via js_inject auch unser kleines routenplanerscript starten
if ($nid == 32 || $nid == 28 || $nid == 33 ) return '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=de&language=de"></script>';
}
?>
Dann lasse ich in der page.tpl von dieser funktion ein script tag unterhalb der anderen scripte einfuegen.
//in der page.tpl dann die funktion am besten nach den anderen scripts aufrufen<?php print $scripts ?>
<?php print templatename_add_mapapi($node->nid) ?>
So jetzt noch den Routenplaner starten. Dazu lasse ich ein kleines JavaScript mit dem Modul JS Injector auf den Nodes einfuegen auf denen ich auch die API lade. So kann ich zumindest fuer dieses Script in der Adminoberflaeche was aendern ohne irgendwo in Dateien rumzuwurschteln. Ich verwende darin relativ neues jQuery deswegen muss warscheinlich jQuery Update installiert sein
//Dieses JavaScript wird mit jsinjector auf allen nodes ausgefuehrt die den Routenplaner enthalten sollen
//JQuery Update muss installiert sein
jQuery(function ($) {
var m = $("#routenplaner_map")[0];
var d = $("#routenplaner_directions")[0];
//defaultwerte, nicht den geolocation dienst benutzen der vertraegt nur 5 request pro sekunde, die koordinaten 1x herausfinden und dann fix reinschreiben
var zielPosition_latidude = 48.029292;
var zielPosition_longitude = 11.595830;
var infoWindowContent = "<div style='margin: 10px;'><p><strong>Ziel</strong><br>Zielstr<br>Zielort<br>089 - 61378 0</p></div>";
//var infoWindowContent = "<div style='margin: 10px;'><p><strong>Ziel</strong></p></div>";
var routeDestination = "Marienplatz, 80331 München, Germany";
var latlng = new google.maps.LatLng(zielPosition_latidude, zielPosition_longitude );
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(m, myOptions);
var infowindow = new google.maps.InfoWindow();
//Setze Pin bei Ziel
var marker = new google.maps.Marker({ map: map, position: latlng});
//Und oeffen gleich mal das InfoWindow
//Inahlt der Bubble setzen
infowindow.setContent(infoWindowContent);
//Und Bubble oeffnen
infowindow.open(map, marker);
// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker, 'click', function() {
//Inahlt der Bubble setzen
infowindow.setContent(infoWindowContent);
//Und Bubble oeffnen
infowindow.open(map, marker);
});
//Routenplaner Objekt erzeugen
directionsDisplay = new google.maps.DirectionsRenderer();
//Routenplaner der Karte und dem DIV fuer die Fahranweisungen zuordnen
directionsDisplay.setMap(map);
directionsDisplay.setPanel(d);
directionsService = new google.maps.DirectionsService();
//Register Events for starting route planning
$('#origin_text').bind('blur', function() {
paintDirection ($('#origin_text').val(), routeDestination);
return false;
});
$('#origin_text').keyup(function(e) {
//alert(e.keyCode);
if(e.keyCode == 13) {
paintDirection ($('#origin_text').val(), routeDestination);
}
});
$('#routeberechnen').bind('click', function() {
paintDirection ($('#origin_text').val(), routeDestination);
return false;
});
function paintDirection (origin, destination) {
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
region : 'de'
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
$('#starthinweis').remove();
$('.detailinfos').slideUp('slow');
directionsDisplay.setDirections(response);
}
else {
alert (unescape("Die%20Berechnung%20Ihrer%20Route%20war%20nicht%20m%F6glich.%20%DCberpr%FCfen%20Sie%20Ihre%20Abfahrtsadresse%2C%20w%E4hlen%20Sie%20eine%20Filiale%20als%20Ziel%20aus%20oder%20geben%20Sie%20ein%20Ziel%20ein."));
}
});
}
/**
* Called when clicking anywhere on the map and closes the info window.
*/
closeInfoWindow = function() {
infowindow.close();
};
// Make the info window close when clicking anywhere on the map.
google.maps.event.addListener(map, 'click', closeInfoWindow);
});
So ich hoffe das bringt Euch weiter. Wenn es noch fragen oder verbesserungen gibt dann mal her damit.
VG
mx