Google Maps API Basic Example

Der Code

Der RubyFrontier-Quelltext für diese Seite (bis zur Überschrift »Der Code») sieht sehr einfach aus:

#title "Google Maps API Basic Example"
#embedjavascript "gmbasics"
#onload "loadMap()"
#onunload "GUnload()"

<h1><%= title%></h1>

<div id="map" style="width:480px;height:480px;"></div>

...

Die ganze Power liegt in der JavaScript-Datei gmbasic.js, die mit der neuen embedjavascript-Direktive eingebunden wurde:

var map;

function loadMap() {
  var mapDiv = document.getElementById('map');
	
  if (!GBrowserIsCompatible()) {
    mapDiv.innerHTML = 'Sorry, your Browser isn\'t compatible with Google Maps.';
  }
  else {
    map = new GMap2(mapDiv, {mapTypes: [G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP]});
    var coordinates = new GLatLng(52.46174, 13.43724);
    map.setCenter(coordinates, 15);
		
    var marker = new GMarker(coordinates);
    marker.bindInfoWindowHtml('<p>Hallo Neubritz!</p>');
    map.addOverlay(marker);
		
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
  }
}

Wie Ihr seht, kann man mithilfe der Funktion bindInfoWindowHTML() beliebigen HTML-Code einfügen. Ich habe daher im Original noch zusätzlich ein Photo aus Flickr eingebunden, aber um den Code hier nicht aufzublähen, überlasse ich das Eurer Phantasie (oder Ihr schaut in den Quellcode der Seite).

Und natürlich muß auch noch die Google Maps API als externes JavaScript eingebunden werden. Ich habe das in einer lokalen #prefs.yaml-Datei mithilfe der meta-Direktive getan:

---
:meta: <script type="text/javascript"
  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXX"></script>

Anstelle von »XXXXX« müßt Ihr natürlich Euren eigenen API-Key eintragen, den Ihr Euch auf dieser Seite besorgen könnt. Während der lokalen Entwicklung könnt Ihr aber auch einfach »key=« benutzen, denn URLs, die mit file:/// anstelle von http:// beginnen, benötigen keinen API-Key.