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.
Snippets
Position des Nutzers bestimmen
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.
