Google Maps - Benutzerdefinierte Stile

2011-11-27T13:55:46Z

79.240.87.161:

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

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

Für die Definition der Stile legt man die Merkmale fest die man stylen will (featureType und featureElement) und gibt dafür stylers an (z.B. Farbton und Sättigung)

Google hat einen Assistenten der einem Hilft ein Kartenbild zusammen zu basteln:

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Google Maps API - Programmieren für Google Maps

2011-11-27T13:45:20Z

79.240.87.161: /* Marker 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 ===
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>

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

Wikizone - Benutzerbeiträge [de]

Google Maps - Benutzerdefinierte Stile

Google Maps API - Programmieren für Google Maps