Dynamic Map Markers

This two-part tutorial is intended for developers who:

This will not work with IE before version 9 or Android before version 3 but there is a work around here.

We are going to make this map marker here:

So, how you do this?

  1. Start with the text from an svg image file. Mine is a sign on a stick, you can modify it or paste yours over it.



  2. If that svg text is valid, the image will be rendered as embedded svg here:

  3. Since you are a developer and that image is really just a text string, you can use a program to compose it and have it vary:

    • The shape
    • The color
    • The text

  4. A sample of how you could use this would be for a concert site that wants to show who is playing where tonight on a map.

    • A venue table could contain the longitude and latitude of the venue and the svg to draw a picture of it.
    • A calendar table could link the artists to the venues for a the night in question
    • An artist table could contain the svg to draw the artist's logo.
    • The svg for the artist's logo could be used to render the marker where the artist is playing that night.
    • If the svg for the artist's logo is missing, the page could fall back to using svg from the venue table to mark the venue with a picture of itself.
    • Alternately the artist's logo could always be the marker and appear in front of the picture of the venue which would be used as the shadow.
    • No image files would be needed to do any of this.

  5. After you have your string composed, convert it to base 64 using the library of your choice or the browser btoa() function so it looks like this:
  6. Than convert that base 64 string into an image expressed as a data uri using this code:
  7. If the original svg text is valid, the image will rendered from that data uri which was made from the base 64 string here:

  8. This page explains SVG in depth and served as my starting point for this tutorial.

  9. But you want a Google Map Marker Icon not a string so you define one. Later on you will see a complicated icon definition but it can be as simple as the data uri of an image:
    
                
  10. And then you make a marker that uses that icon:
    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: signIcon
    });
    To see the marker rendered using that just that code, click here.

  11. But let's give the marker a shadow, not an ordinary shadow, but this clump of grass right at the base of the post:
  12. We need some additional parameters to define it and how it is used:

    • Image URL: - This points to the image above.
    • Scaled height: px - This sets its new height.
    • Scaled width: px - This sets its new width.
    • X attachment px - This moves it side to side.
    • Y attachment px - This moves it up and down.
    • Flat (no shadow): - This removes the shadow so it is not used.

  13. So we define it as an icon with those parameters and add it to the marker definition:
          var grass = {
            url: 'grass.png',
            scaledSize: new google.maps.Size(30, 20), 
            size: new google.maps.Size(30, 20), 
            anchor: new google.maps.Point(17, 35)
          };  
              
          var marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
            icon: signIcon,    // defined in point 9, above
            flat: false,     
            shadow: grass
          });  
    If you do not see the shadow on the map, uncheck the checkbox above.

  14. The illustrations in this tutorial are invaluable in understanding marker shadow positioning.

  15. This is the end of Part 1 which will work for IE 9 and later, Android 3 and later, and everything else.

Continue to Part 2 of this tutorial which explains the work around for IE 8 and Android 2.