Google Maps API - Programmieren für Google Maps

Die folgenden Code Beispiele basieren i.d.R. auf der Google API Version3, bei der kein API Key mehr benötigt wird.

Links

Google Group zu Google Maps http://groups.google.com/group/google-maps-js-api-v3

Developer Dokumentation von Apple http://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html

Android Dokumentation http://developer.android.com/

Snippets

Position des Nutzers bestimmen

http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#DetectingUserLocation (11/2011)

Google liefert folgendes Code Beispiel. Dabei wird zuerst getestet ob der Browser die HTML5 Geocoding Spezifikation des W3C unterstüzt (http://dev.w3.org/geo/api/spec-source.html). Wenn nicht wird Google Gears getestet und ansonsten eine Fehlermeldung ausgegeben.

// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();

function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
  
  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
    map.setCenter(initialLocation);
  }
}

Sensorparameter einstellen

Die Anwendung muß angeben ob sie einen Sensor zur Positionsbestimmung benutzt. Z.B. der GPS Empfänger in einem Handy. Wenn nicht muß trotzdem "false" übergeben werden.

#
# Example using sensor when loading the Maps JavaScript API
#
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">

Optimierungen für Mobilgeräte

http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#Mobile

Umgebender Div Container (hier mapdiv) mit width:100%. Bei älteren Desktop Browsern kann dies aber zu Schwierigkeiten führen.

Sie können iPhones und Android-Geräte anhand der navigator.userAgent-Eigenschaft im DOM erkennen:

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
    
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}

Dadurch können Sie das Layout für bestimmte Geräte wie in diesem Beispiel verändern und beispielsweise den verfügbaren Platz auf dem Display für jedes Gerät anpassen.

Das iPhone akzeptiert das folgende <meta>-Tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Diese Einstellung gibt an, dass diese Karte im Vollbildmodus angezeigt werden soll und ihre Größe vom Nutzer nicht geändert werden kann. Android-Geräte mit Softwareversion 1.5 (Cupcake) unterstützen diese Parameter ebenfalls. Für den iPhone-Browser Safari muss dieses <meta>-Tag im <head>-Element der Seite enthalten sein.

Lokalisierung einer v3 App (Sprachanpassung)

Sprachlokalisierung und Anpassung der Texte - language Parameter

Normalerweise nicht notwendig weil die Sprache des Browsers verwendet wird. Wenn doch dann mit dem Language Parameter.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=de">

Gebietslokalisierung - region Parameter

Normalerweise wird die Domain der Homepage für die Regionserkennung verwendet. Manchmal möchte man die Region verändern damit Google Maps richtig gewichtet. Z.B. kann die Suche nach dem Ort Toledo den Ort in Spanien finden oder in den USA. Wenn der Region Parameter auf es steht liefert er stets den Ort in Spanien.

Beispiel

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB">

Richtige API Version laden - der v Parameter

http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#Versioning

Beispiel

http://maps.google.com/maps/api/js?v=3.1&sensor=true_or_false