Wikizone - Benutzerbeiträge [de]

Google Maps - eigene Marker und Symbole

2011-11-24T10:43:53Z

79.240.88.158: Die Seite wurde neu angelegt: „== Einfache Marker == http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/overlays.html#Markers (11/2011) Ein einfacher selbstgemachter Marker e…“

== Einfache Marker ==
http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/overlays.html#Markers (11/2011)

Ein einfacher selbstgemachter Marker ersetzt einfach den Standard Pin von Google. Die Größe wird dabei automatisch angepasst.
<pre>
// Einfacher Marker für die Achalm
var posAchalm = new google.maps.LatLng(48.493978,9.244276);
var imgAchalm = 'images/beachflag.png';
var marker = new google.maps.Marker({
position: posAchalm,
icon: imgAchalm,
map: map,
title:"Achalm"
});
</pre>

== Komplexe Marker ==
Komplexen MarkerImage Objekte können aus mehreren Teilen bestehen. Außerdem gibt man zusätzliche Parameter an mit denen anklickbare Regionen, Ausschnitte, Hotspot, Schattenbilder usw. definiert werden.

Wichtige Optionen sind:
* size - Größe des Bilds
* origin - wenn das gewünschte Bild z. B. Teil eines größeren Bildes in einem Sprite ist
* anchor - wo der Hotspot des Symbols lokalisiert sein soll (basierend auf dem Ursprung).

Beispiel von Google

<pre>
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

setMarkers(map, beaches);
}

/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
// Add markers to the map

// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.

// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}

</pre>

Google Maps API - Programmieren für Google Maps

2011-11-24T10:36:25Z

79.240.88.158: /* Weiterführende und fortgeschrittene Techniken 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/

=== 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.

<pre>
// 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);
}
}
</pre>

=== 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.

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

=== 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:
<pre>
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';
}
}
</pre>
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 ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

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'''
<pre>
// 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"
});
</pre>

== Google Maps Beispiele ==
Beispiele auf Google: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/index.html
=== Simple Map ===
<pre>

<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>

</pre>

Google Maps API - Programmieren für Google Maps

2011-11-24T08:23:10Z

79.240.88.158: /* Wichtige Google Maps Objekte */

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]]

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.

<pre>
// 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);
}
}
</pre>

=== 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.

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

=== 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:
<pre>
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';
}
}
</pre>
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 ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

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'''
<pre>
// 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"
});
</pre>

== Google Maps Beispiele ==
Beispiele auf Google: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/index.html
=== Simple Map ===
<pre>

<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>

</pre>

Google Maps API - Programmieren für Google Maps

2011-11-24T08:07:14Z

79.240.88.158: /* Google Maps Beispiele */

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]]

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.

<pre>
// 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);
}
}
</pre>

=== 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.

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

=== 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:
<pre>
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';
}
}
</pre>
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 ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

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);

== Google Maps Beispiele ==
Beispiele auf Google: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/index.html
=== Simple Map ===
<pre>

<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>

</pre>

Google Maps - Benutzerdefinierte Stile

2011-11-24T07:57:42Z

79.240.88.158: Die Seite wurde neu angelegt: „http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/overlays.html#StyledMaps Mit den Styled Maps läßt sich das Aussehen der Karten sehr indivi…“

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

Mit den Styled Maps läßt sich das Aussehen der Karten sehr individuell anpassen.

Google Maps API - Programmieren für Google Maps

2011-11-24T07:56:53Z

79.240.88.158: /* Weiterführende und fortgeschrittene Techniken 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/

=== 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]]

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.

<pre>
// 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);
}
}
</pre>

=== 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.

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

=== 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:
<pre>
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';
}
}
</pre>
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 ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

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);

== Google Maps Beispiele ==
=== Simple Map ===
<pre>

<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>

</pre>

Google Maps API - Programmieren für Google Maps

2011-11-24T07:55:07Z

79.240.88.158: /* API Links */

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 ===
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.

<pre>
// 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);
}
}
</pre>

=== 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.

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

=== 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:
<pre>
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';
}
}
</pre>
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 ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

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);

== Google Maps Beispiele ==
=== Simple Map ===
<pre>

<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>

</pre>

Google Maps API - Programmieren für Google Maps

2011-11-24T07:54:22Z

79.240.88.158: /* Options Objekt */

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 ===
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 ===
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.

<pre>
// 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);
}
}
</pre>

=== 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.

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

=== 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:
<pre>
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';
}
}
</pre>
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 ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

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);

== Google Maps Beispiele ==
=== Simple Map ===
<pre>

<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>

</pre>