If you’re adding a map to your website, why settle for the vanilla design when you can customize it and leave your own personal mark?
This tutorial will show you how to create a custom map from scratch, then add a little unique flavor to it by replacing the standard “map pin” icon with a custom icon of your own design.
To do this, we’ll be using Mapstraction, a library that creates map code that can be reused across all the big mapping providers (Yahoo, Google, et al). Mapstraction also allows for multiple types of customization such as custom info bubbles and graphics like the one we’ll be dropping onto the map.
Note: This tutorial is adapted from the book Map Scripting 101 by Adam DuVander. Adam is a former Webmonkey contributor and executive editor of Programmable Web. In his book, he shows how to use all of the features of the most popular mapping APIs, and how to mash them up with data from other sources like events calendars, weather services and restaurant review sites to make a variety of custom maps.
This exercise comes from chapters 1 and 2 of Adam’s book, and it is reprinted here with his permission and that of the book’s publisher, No Starch Press. It isn’t a word-for-word excerpt. It has been slightly adapted to work as a web tutorial. You’ll find dozens of in-depth exercises — including the full version of this one — in the book itself.
Create a Mapstraction map
Using Mapstraction limits your risk to changes being made to an API. For example, if your site’s traffic takes you beyond the limit for your chosen provider, or the provider begins placing ads on the map, Mapstraction lets you switch providers quickly and inexpensively.
To use Mapstraction, you must first choose a provider. In this example, I’m using Mapstraction to create a Google Map.
Continue Reading “Personalize Your Map With a Custom Map Marker” »