Google Maps API

Last Updated: 2015-05-21

This is deprecated, because of the release of google maps api version 3, but i leave it here for reference reasons.

I want to share some insights about the google maps api which i gained over the last few days. I guess, i just write a small how-to to get your own google maps featured directions.
First of all, to use all the magic of google maps, you have to get a google maps api key by signing up and entering the top level domain of your homepage on which you want to show the map. There is quite a good documentation of the api and some nice examples but in my case, knowing next to nothing about java script, these didn’t quite help me doing what i wanted to do. So i surfed around the world wide web and got the final code together with snippets from here and there. I hope, someone will find this short explanation aka how to useful.
Step one: insert this into the head section of your html-file:

<script type="text/javascript" src=""></script>

XXX being your developer key

<div id="gmap-name" style="width: 400px; height: 400px; float: left;">
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.

you should always have some explanation in the noscript area – even better would be a static version, i.e. a jpg, of the map.

<!-- google maps api -->
<script type="text/javascript">// <![CDATA[
    // Check to see if this browser can run the Google API
    if (GBrowserIsCompatible()) {
      var gmarkers = [];
      var htmls = [];
      var to_htmls = [];
      var from_htmls = [];
      var i=0;
      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        // The info window version with the "to here" form open
        to_htmls[i] = html + '<br>Route berechnen: <b>Hierher<\/b> - 

<a href="javascript:fromhere(' + i + ')">Von hier<\/a>' +
           '<br>Startadresse:<form action="" method="get" target="_blank">' +
           '<input type="text" SIZE=23 MAXLENGTH=50 name="saddr" id="saddr" value="" />&nbsp;' +
           '<INPUT value="Los" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' + + ',' + point.lng() +
                  // "(" + name + ")" +
           '" />';
        // The info window version with the "to here" form open
        from_htmls[i] = html + '<br>Route berechnen: 

<a href="javascript:tohere(' + i + ')">Hierher<\/a> - <b>Von hier<\/b>' +
           '<br>Zieladresse:<form action="" method="get"" target="_blank">' +
           '<input type="text" SIZE=23 MAXLENGTH=50 name="daddr" id="daddr" value="" />&nbsp;' +
           '<INPUT value="Los" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + + ',' + point.lng() +
                  // "(" + name + ")" +
           '" />';
        // The inactive version of the direction info
        html = html + '<br>Route berechnen: <a href="javascript:tohere('+i+')">Hierher<\/a> - 

<a href="javascript:fromhere('+i+')">Von hier<\/a>';

        GEvent.addListener(marker, "click", function() {
        gmarkers[i] = marker;
        htmls[i] = html;
        return marker;
      // functions that open the directions forms
      function tohere(i) {
      function fromhere(i) {
    // Display the map, with some controls and set the initial location
      var map = new GMap2(document.getElementById("gmap-name"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(12.3456,12.3456), zoom-level);

change your coordinates accordingly

// Set up three markers with info windows
      var point = new GLatLng(12.3456,12.3456);

set to the same coordinates as above

var marker = createMarker(point,'markername','balloon-html-code')
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
// ]]></script>


For gmap-name get a unique name for each div, where your map(s) should be displayed, zoom-level is the initial zoom level the map shows (going from 1 to 18 iirc), markername is just a name for your marker, balloon-html-code is the whole html that should be displayed in the ballon without the route stuff.

I hope this is not too badly coded – use at your own risk ;)… if anyone has any optimizations, please post a comment!


Not yet rated