Google Maps Karten sind auf fast jeder Webseite aufzufinden. Die neueste Version Google Maps JavaScript API V3 bietet:
- erweiterte Unterstützung für mobile Geräte
- Integration von Google Street View
- verbesserte Performance
- Weiterentwicklungen in Zukunft, da Version V2 als veraltet erklärt wurde seitens Google
- es wird kein API Schlüssel mehr benötigt, wie bei V2
Als Grundgerüst reicht der folgende HTML und Javascript Code aus:
<html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/gmaps.js"></script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:600px; height:600px"></div> </body> </html>
js/gmaps.js:
function initialize() {
var latlng = new google.maps.LatLng(54, 12);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
Für kommerzielle Lösungen, die meist weit komplizierter sind, sollte auf jeden Fall die sehr gute Erweiterung Google Maps Utility Library V3 benutzt werden.
Damit es wird bspw. möglich Marker mit Text zu füllen und eigenem Design oder Gruppen von Markern zu bilden und diese automatisch bei bestimmten Zoomstufen ein- und auszublenden.
Tipps und Tricks bei der Google Maps Utility Library V3
Problem: Ich will meinen eigenen Marker benutzen und Text auf Ihn schreiben, aber auf die ganzen Marker Funktionen nicht verzichten.
Lösung: Man kann die Klassenerweiterung MarkerWithLabel aus der Google Maps Utility Library nutzen und den Marker unsichtbar machen und nur das Label für die Anzeige der Informationen nutzen und stylen.
Javascript:
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(lat, lon),
map: map,
draggable: false,
raiseOnDrag: false,
labelContent: "Text",
labelAnchor: new google.maps.Point(73, 50),
labelClass: "gmapLabelClosed", // the CSS class for the label
labelInBackground: true,
//invisible Marker needed
icon:"img/empty.png",
});
CSS:
.gmapLabelClosed
{
border:none;
font-size: 22px;
color: white;
font-weight: 900;
padding-left:20px;
padding-top:10px;
height: 44px;
width: 146px;
background: url('../img/closed.png') no-repeat;
}
Problem: Ich will einen mouseover CSS Effekt einbauen und die Grafik meines Markers (genauer des Labels) sowie den Text auf dem Label ändern und zusätzlich das Label in den Vordergrund rücken. Bei mouseout soll es wieder rückgängig gemacht werden.
Lösung: Einfach die CSS-Klasse des Markers wechseln.
Javascript:
google.maps.event.addListener(marker, "mouseover", function (e) {
this.set("labelContent", "neuer Text");
this.set("labelClass", "gmapLabel");
this.setZIndex(999);
});
google.maps.event.addListener(marker, "mouseout", function (e) {
this.set("labelContent", "alter Text");
this.set("labelClass", "gmapLabelClosed");
//auto zindex
this.setZIndex(undefined);
});
CSS:
.gmapLabel
{
width: 290px;
background: url('../img/bild.png') no-repeat;
}
Buchempfehlung zu Google Maps :
- z.B. Handling von großen Map-Marker Mengen
- Adressen und Koordinaten ermitteln mit GeoCoding und reversed GeoCoding
