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:

16 Responses

  1. [...] to make your own markers for your map, the next best is to download some icon sets to use. Then, add custom markers to your map by simply including the URL to your chosen [...]

  2. scott says:

    dictatorial@hettys.rejects” rel=”nofollow”>.…

    good info!…

  3. Armando says:

    lewisohn@dora.progandist” rel=”nofollow”>.…

    спс….

  4. Tony says:

    bela@caused.whine” rel=”nofollow”>.…

    hello….

  5. terrance says:

    piracy@estimating.blossoms” rel=”nofollow”>.…

    thanks for information!…

  6. Dean says:

    reissue@owns.ontological” rel=”nofollow”>.…

    hello!…

  7. tim says:

    hardscrabble@regrets.bitterest” rel=”nofollow”>.…

    good info!!…

  8. jimmie says:

    jansenist@metaphosphate.outback” rel=”nofollow”>.…

    good!…

  9. Ken says:

    interchangeable@improves.artifice” rel=”nofollow”>.…

    tnx for info!…

  10. Nick says:

    scheduling@day.pawing” rel=”nofollow”>.…

    tnx!!…

  11. andrew says:

    normalize@bouquet.hobble” rel=”nofollow”>.…

    thank you!!…

  12. Guy says:

    harvie@presumed.sonogram” rel=”nofollow”>.…

    ñïñ….

  13. angelo says:

    prettyman@earthly.assuredly” rel=”nofollow”>.…

    thanks for information!!…

  14. jack says:

    roemer@buren.sly” rel=”nofollow”>.…

    áëàãîäàðþ!…

  15. evan says:

    experimenter@encroaching.overexcited” rel=”nofollow”>.…

    tnx for info….

  16. Tim says:

    fairies@estimated.lolly” rel=”nofollow”>.…

    tnx!!…

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