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" "">
<html xmlns="" xmlns:v="urn:schemas-microsoft-com:vml">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps test</title>
    <script src=";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);

        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(new CircleOverlay(point, 0.2, "#444499", 1, 1, '#444499', 0.25));
            map.addOverlay(new CircleOverlay(point, 0.1, "#FFFF99", 1, 1, '#FFFF99', 0.25));


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

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.

Google Maps icons and circles
Tagged on:

3 thoughts on “Google Maps icons and circles

Leave a Reply

Your email address will not be published. Required fields are marked *