Google Maps API V3 – Marker Bild ändern

Nicht jedem gefallen die roten Standard-Marker. Deshalb ist in der Maps-API auch vorgesehen, dass man seine eigenen Bilder verwenden kann. Auf mapicons.nicolasmollet.com gibt es eine Auswahl an verschiedenfarbigen Marker Icons, die mit einem Generator auch noch an die eigenen Bedürfnisse angepasst werden können.

Im Beispiel möchte ich nun den vorhandenen Marker durch einen weißen Stern auf grünem Grund ersetzen.

Um dies zu erreichen muss nur eine weitere Zeile (grün markiert) zum Code aus dem letzten Tutorial hinzugefügt werden:

marker = new google.maps.Marker({
 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
 map: map,
icon: 'marker_stern-gruen.png'
 

Es erfolgt also eine einfache Zuweisung für „icon“. In diesem Fall liegt die png-Datei im selben Ordner. Es kann aber natürlich auch ein anderer Ordner gewählt werden.

Damit du ihn selbt ausprobieren kannst brauchst du noch das Bild. Dies kannst du hier downloaden.

Das Endergebnis sieht dann so aus:

Der gesamte Code sieht dann wie folgt aus:

<html>
<head>
<title>Google Maps V3 - Iconbild ändern</title>
 <meta http-equiv="content-type" content="text/html;" />
 <script src="http://maps.google.com/maps/api/js?sensor=false"
 type="text/javascript"></script>
</head>

<body>
<h1>Millionenstädte in Deutschland</h1>
<div id="map" style="width: 750px; height: 400px;"></div>
 <script type="text/javascript">
// Informationen der einzelnen Marker
 var locations =
 [
 ['Hamburg<br>1,800 Mio Einwohner', 53.5510846 , 9.9936818 ],
 ['Berlin<br>3,510 Mio Einwohner', 52.519171 , 13.4060912 ],
 ['Köln<br>1,020 Mio Einwohner', 50.937531 , 6.9602786 ],
 ['München<br>1,380 Mio Einwohner', 48.1366069 , 11.5770851 ],
 ];

// Festlegung des ID-Namens (für div id), der Zoomstufe (1-16), des Mittelpunktes der Karte, und des Kartentyps
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 5,
 center: new google.maps.LatLng(51, 10.5),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

// Infofenster ("Blase") soll angezeigt werden
 var infowindow = new google.maps.InfoWindow();

// Auslesen der Markerinformationen
 var marker, i;

 // Länge und Breite und Festlegung für welche div-ID dies gilt
 for (i = 0; i < locations.length; i++)
 {
 marker = new google.maps.Marker({
 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
 map: map,
 icon: "marker_stern-gruen.png",
 });

 // Infofenster: Wie wird es angesprochen und was befindet sich in ihm
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
 return function() {
 infowindow.setContent(locations[i][0]);
 infowindow.open(map, marker);
 }
 })(marker, i));
 }
 </script>
</body>
</html>

Wie verschiedene Marker-Bilder in einer Karte dargestellt werden können, erkläre ich in Teil 3 der Google-Map-Tutorials.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: