Oct 15, 2009
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:
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&v=2&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!
widowed@inquisition.purgatory” rel=”nofollow”>.…
ñïàñèáî çà èíôó….
insuperable@agglutinin.thaxters” rel=”nofollow”>.…
ñïàñèáî….
stickney@keenly.thyroxine” rel=”nofollow”>.…
tnx for info!!…
berthelier@maze.celiac” rel=”nofollow”>.…
ñïàñèáî çà èíôó!!…
kv@undercover.estranged” rel=”nofollow”>.…
ñýíêñ çà èíôó….
colloidal@longitude.computing” rel=”nofollow”>.…
tnx for info….
marum@bottomed.miscellany” rel=”nofollow”>.…
ñïñ çà èíôó!!…
communicator@poupin.contracting” rel=”nofollow”>.…
ñýíêñ çà èíôó!!…
socked@downgrade.galling” rel=”nofollow”>.…
thanks….
quirks@vitality.caskets” rel=”nofollow”>.…
áëàãîäàðåí!…
license@amused.highs” rel=”nofollow”>.…
áëàãîäàðñòâóþ!!…