Google Maps icons and circles

It is quite easy to add content to Google Maps by using the API. In this article we will use some icons to mark points of interest and use polygons to emulate circles around a marker.

We want to give Google Maps an address and have a special icon and two circles around this point of interest. A picture says more than a thousand words, so here is the effect we want:

The Map Icon Collection hosts a large set of icons that are free to use in Google Maps. A small sample is shown below:

The following code achieves the effect we want. Take a look at the live result on this page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps test</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAArmrLJW3ZXq5P2DWexL7cFRSV6dnYUXLUEsXoSWmGp_LQX0Ln_BRimh_EXlhDUBj_zubkneJU9IiMuw" type="text/javascript"></script>
    <script src="gmaps-circle-overlay.js" type="text/javascript"></script>
    <script type="text/javascript">

    var ICON_LOCATION = "/res/";
    var ICON_BUSINESS = ICON_LOCATION + "business.png";
    var ICON_HOUSE = ICON_LOCATION + "house.png";
    var ICON_WIDTH = 32;
    var ICON_HEIGHT = 37;

    var map = null;
    var geocoder = null;

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(53.199290, 6.523368), 15);
        map.setUIToDefault();

        geocoder = new GClientGeocoder();

        showAddress("Fivelgolaan 10, Groningen, Nederland", ICON_HOUSE);
        showAddress("Peizerweg 200, Groningen, Nederland", ICON_BUSINESS);
      }
    }

    function showAddress(address, image, width, height) {
      if (geocoder) {
        geocoder.getLatLng(address, function(point) {
          if (!point) {
            alert(address + " not found");
          } else {
            var myIcon = new GIcon(G_DEFAULT_ICON);
            myIcon.image = image;
            myIcon.iconSize = new GSize(ICON_WIDTH, ICON_HEIGHT);
            markerOptions = { icon:myIcon };
            marker = new GMarker(point, markerOptions);
            GEvent.addListener(marker, "click", function() {
              map.openInfoWindowHtml(point, address);
            });
            map.addOverlay(marker);
            map.addOverlay(new CircleOverlay(point, 0.2, "#444499", 1, 1, '#444499', 0.25));
            map.addOverlay(new CircleOverlay(point, 0.1, "#FFFF99", 1, 1, '#FFFF99', 0.25));
          }
        });
      }
    }

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 800px; height: 500px"></div>
  </body>
</html>

The drawing of circles is handled by a stand-alone piece of Javascript by Daws Design. I edited it a bit to have it use kilometres instead of miles.

Advertisements
This entry was posted in programming and tagged . Bookmark the permalink.

2 Responses to Google Maps icons and circles

  1. Pingback: Google Maps icons and circles revisited | Hailendal.org

  2. Pingback: Google Maps icons and circles revisited | Servicelab.org

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s