Google Maps API - Programmieren für Google Maps

Aus Wikizone
Wechseln zu: Navigation, Suche

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/

API Links

Google Maps API-Familien (auf deutsch) http://code.google.com/intl/de-DE/apis/maps/

Geocodierung: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/services.html#Geocoding

Ereignisse (Events): http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/events.html

Snippets

Weiterführende und fortgeschrittene Techniken für Google Maps

Google Maps - Benutzerdefinierte Stile

Google Maps - eigene Marker und Symbole

Hier kommen Links rein...

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

Kartentyp ändern

Kartentypen werden im Map options-Objekt der Karte mithilfe der mapTypeId-Eigenschaft festgelegt.

Die folgenden Kartentypen sind im Google Maps-API verfügbar: 

   MapTypeId.ROADMAP zeigt die Standard-Straßenkartenansicht.
   MapTypeId.SATELLITE zeigt Google Earth-Satellitenbilder.
   MapTypeId.HYBRID zeigt eine Mischung aus der normalen und der Satellitenansicht.
   MapTypeId.TERRAIN zeigt eine physische Karte an, die auf Geländeinformationen basiert.

Sie können den Kartentyp einer Karte ändern, indem Sie die setMapTypeId()-Methode der Karte aufrufen.

Wichtige Google Maps Objekte

Wichtige Objekte anhand von Beispiel Definitionen:

LatLng Objekt

var myLatlng = new google.maps.LatLng(-34.397, 150.644);

Options Objekt

var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Wird normalerweise nicht direkt erzeugt sondern als "Literalobjekt" (also als Zeichenfolge) definiert und dann direkt im Map Objekt verwendet und implizit erzeugt (siehe Map Objekt)

Wichtige Optionen

Einige oft benötigte Optionen und was sie machen:

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

  • zoom - anfänglicher Zoom Level (0 = World) Erforderlich
  • mapTypeId - anfängliche mapTypeId der Karte. Erforderlich
  • center - anfängliches Kartenzentrum. Erforderlich
  • disableDefaultUI - damit kann man die Standard Bedienelemente ausschalten (true,false). Man kann fast alles auch einzeln ein und ausschalten (Maussteuerung, Tastatursteuerung, verschieben der Karte, etc.). Siehe Link oben.
  • navigationControlOptions Anfängliche Anzeigeoptionen für die Navigationssteuerung (position, style).

Map Objekt

Das Zentrale Objekt. 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Marker Objekt

Benötigt als Parameter eine Position und optional das Map Objekt. Wenn dies nicht vorhanden ist kann man den Marker später mit setMap hinzufügen. Mit setMap(null) kann man den Marker entfernen.

Standardmäßig haben die Marker einen click Listener.

Beispiel - Marker hinzufügen 

// Marker für die Achalm
var posAchalm = new google.maps.LatLng(48.493978,9.244276);
var marker = new google.maps.Marker({
    position: posAchalm, 
    map: map,
    title:"Achalm"
});

Info Window Objekt

Das folgende Beispiel definiert ein InfoWindow, welches an einen Marker ("marker") gehängt wird und sich bei Klick öffnet. Es funktioniert also mit dem obigen Marker Beispiel zusammen. 

	// INFOWINDOW
	// Inhalt festlegen
	var contentString = '<div id="content">'+
	    '<div id="siteNotice">'+
	    '</div>'+
	    '<h1 id="firstHeading" class="firstHeading">Achalm</h1>'+
	    '<div id="bodyContent">'+
	    '<p>Die <b>Achalm</b>, ist der Hausberg der Stadt Reutlingen, ' +
	    'am Rande der schwäbischen Alb gelegen. '+
	    '<p>Attribution: Achalm, <a href="http://de.wikipedia.org/wiki/Achalm">'+
	    'Achalm in der Wikipedia</a>.</p>'+
	    '</div>'+
	    '</div>';
	// Fenster erzeugen...
	var infowindow = new google.maps.InfoWindow({
		content: contentString,
		maxWidth: 280
	});
	// Klick-Listener an Marker hängen der das Fenster öffnet.
	google.maps.event.addListener(marker, 'click', function() {
	  infowindow.open(map,marker);
	});

Google Maps Beispiele

Beispiele auf Google: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/index.html

Simple Map


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Google_Maps_API_-_Programmieren_für_Google_Maps&oldid=18939“