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="https://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.

3 thoughts on “Google Maps icons and circles

  1. Permalink  ⋅ Reply

    JORDAN

    January 22, 2019 at 1:41pm

    Hi
    I’m trying to figure out in Google maps what the little number 1 in a circle means. A backup image appears behind it. It appears on every route option in the box that gives the length of time the route will take. It seems totally meaningless. Do you know what it means?
    Thanks

Leave a Reply

Your email will not be published. Name and Email fields are required.