Kategorien
JavaScript Web Frontend

Google Maps JavaScript API V3 und Utility Library V3 Tutorial

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