Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp11/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2011 - Frontend - Google Maps

Google Maps

Einleitung

Zur Visualisierung von Fahrten, werden auf deren Detailseiten interaktive Karten mit Markierungen für Start- und Zielpunkt, sowie eingeblendeter Route angezeigt. Im Folgenden werden einige grundlegene Informationen zur Google Maps-API dargelegt und die Implementierung der Karte beschrieben.

Google bietet verschiedene Schnittstellen zum Integrieren von Karten in Webseiten an, die je nach Anwendungsgebiet sinnvoll eingesetzt werden können:

  • Google Maps JavaScript-API
  • Google Maps-API für Flash
  • Static Maps-API
  • u.a.

Integration der JavaScript-API in Webseiten

Bevor eine Karte auf einer Webseite angezeigt werden kann, muss ein externes JavaScript von Google geladen werden. Weiter ist es notwendig, eine Methode zum Initialisieren der Karte einzubinden.

var directionDisplay;
var map;
 
function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom:7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
}

Der Beispielcode liefert jedoch noch keine Route mit Markierungen für Start- und Zielposition. Daher wurde dieser Code mit Hilfe weiterführender Informationen dahingehend angepasst, dass es möglich ist, Start und Ziel als Koordinaten anzugeben.

var start = new google.maps.LatLng(#{trip.starts_at_N}, #{trip.starts_at_E}, true);
var end = new google.maps.LatLng(#{trip.ends_at_N}, #{trip.ends_at_E}, true);
var request = {
    origin:start, 
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};
 
var directionsService = new google.maps.DirectionsService();
 
directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

Hierbei fällt auf, dass ein Teil des eigentlich statischen JavaScript-Codes in den ersten beiden Zeilen mit Hilfe von Ruby dynamisch mit Werten versorgt wird (die Stellen, an denen "#{trip...}" auftaucht). Dabei werden die Koordinaten von Start- und Zielposition der Fahrt, die gerade aufgerufen wird, in den JavaScript-Code geschleust, um für jede Fahrt die individuelle Route anzeigen zu können.

Weiter muss noch festgelegt werden, an welcher Stelle die Karte erscheinen soll. Hierfür wird ein HTML-Div-Element mit dem Attribut id="map_canvas" eingefügt. Die JavaScript-API sucht automatisch nach einem solchen Div-Element, um dort die Karte einzufügen.

Zuletzt muss noch die Initialisierungsmethode aufgerufen werden. Hierbei ist jedoch wichtig, dass die Webseite vollständig geladen wurde, bevor der Methodenaufruf geschieht - andernfalls wird die Karte möglicherweise nicht angezeigt. Dies ist dann der Fall, wenn beim asynchronen Laden der Webseite, die Methode aufgerufen wird, bevor die externe Google-JavaScript-Datei geladen wurde. Um diesen Fall zu vermeiden, muss im Body-Tag der Webseite das JavaScript-Ereignis onload die Methode aufrufen. Dies gestaltete sich jedoch bei diesem Projekt schwierig, da alle Views per %=yield-Befehl im gleichen Body integriert werden (siehe hierzu Kapitel 2.1 Layout). Dadurch würde jedoch das Einbinden des onload-Ereignisses auf jeder Unterseite erfolgen, obwohl dies nur für die Detailsansicht einer Fahrt gelten soll.

Dieses Problem wird behoben, indem per Ruby abgefragt wird, welche Unterseite gerade aufgerufen wird.




def gmap_onload()
  if params[:controller] == "trips" and params[:action] == "show"
    {:onload => "initialize()"}
  else
    {}
  end
end

Wird die gewünschte View aufgerufen, so wird eine Hashmap generiert, die dem onload-Ereignis den Aufruf der Methode zum Initialisieren der Karte zuweist. Wird eine andere Seite aufgerufen wird ein leerer Hash generiert. Das Ergebnis dieser Methode wird in das Body-Element eingefügt - somit wird das onload-Ereignis des Body nur gesetzt, wenn erwünscht.


Page last modified on August 21, 2011, at 03:35 PM