Map Scripting

Icon

Create Location-based Web Applications

How to Add Custom Markers to Your Map

It might be the best way to make your map look different than all the others. Lose the reverse tear drop icons (the default Google look) and add your own graphics.

Mapstraction makes it easy to include your own markers. And, as always, write the code once in Mapstraction and it works in one of a dozen mapping APIs. Here’s a custom marker map demo that shows a sombrero over my favorite Mexican restaurant in Portland. Classy!

It looks something like this:
Custom sombrero marker

Now you try:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Custom Marker Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOURKEY"
    type="text/javascript"></script>
    <script src="mapstraction.js"></script>
    <style>
      div#mymap {
        width: 400px;
        height: 350px;
      }
    </style>
    <script type="text/javascript">
      var mapstraction;
function create_map() {
  mapstraction = new Mapstraction('mymap', 'google');
  mapstraction.setCenterAndZoom(
    new LatLonPoint(45.559242, -122.636467), 15);
  var mk = new Marker(new LatLonPoint(45.559242, -122.636467));
  mk.setIcon('sombrero.png', [40,24]);
  mk.setShadowIcon('sombrero-shadow.png', [53,24]);
  mapstraction.addMarker(mk);
}
    </script>

  </head>
  <body onload="create_map()">
    <div id="mymap"></div>
  </body>
</html>

Remember you’ll need to download Mapstraction and get a Google Maps API key. Finally, make sure you have the following if you plan on using the sombrero images:

Happy mapping with your custom markers!

Category: How-tos

Tagged:

51 Responses

  1. Wayne says:

    widowed@inquisition.purgatory” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

Leave a Reply

Adam DuVanderHi, I'm Adam. I'm writing a book about developing maps on the web. This site is where I'll share the things I find and help you create your own maps. Find out more.

Map Scripting 101