Google Maps JavaScript API V3 und Utility Library V3 Tutorial


Google Maps Maps are to be found on almost every website. The latest version Google Maps JavaScript API V3 offers:

  • enhanced support for mobile devices
  • Integration of Google Street View
  • improved performance
  • Further developments in the future, since V2 version has been declared obsolete by Google
  • it is no longer needed API key, as V2

As the backbone extends from the following HTML and JavaScript code:

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

For commercial solutions, which are usually much more complicated, In any case, the very good extension Google Maps Utility Library V3 be used.

For example, so that it will. possible marker to fill with text and form their own design or groups of markers and this automatically at certain zoom levels- and hide.

Tips and tricks from the Google Maps Utility Library v3

Problem: I want to use my own marker and write text on Him, but not waive the entire marker functions.

Solution: You can see the class extension Marker With Label use of the Google Maps utility library and make the invisible marker and style use only the label for the display of information and.

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: I want to install a mouseover CSS effects and graphics of my marker (detail of the label) and change the text on the label and move the label in addition to the fore. In mouseout it should be reversed.

Solution: Just change the CSS class of the label.

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

Book recommendation on Google Maps :

  • e.g.. Handling large amounts of map markers
  • Addresses and coordinates with GeoCoding and reversed GeoCoding