The Insider

Yahoo! Maps API on http://developer.yahoo.com/maps/, more specifically  Ajaxified maps, are very easy to be implemented on our websites! I should admit that the documentation was very decent and the examples were very handy trying to cover different scenarios!

To include a map, after you go through the docco, the first step would be to get the appid using the links on the page http://developer.yahoo.com/maps/ajax/

So to insert a map in to a web page:

1. Add a div with specific id (e.g.. <div id=”map”></div>)

2. Add the following JS in the head section of the page:

<script type=“text/javascript” src=“http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=APPID“></script>

3. Add the following lines of code:

• Create a map object

var map = new YMap(document.getElementById(’map’));

• Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG

map.setMapType(YAHOO_MAP_REG);

• Display the map centered on a geocoded location

map.drawZoomAndCenter(”San Francisco”, 3);

While this inserts the map into the page, there are different options and controls that you can add to the map to make it interactive! A few examples:

• If you want to add a map type control

map.addTypeControl();

• To add zoom control

map.addZoomLong();

• To add panControl

map.addPanControl();

There are whole lots of other stuff you can do, like placing markers on the maps, loggers etc! To make life more easier doing this, GeoRSS is introduced! Its typically RSS 2.0 syndication style but has the tags matching the geocoding style, so you can add information like latitude, longitude, address etc!

For my travel blog escape.stills360 I am working on adding Y! maps and I might be giving out the bit of the code that can generate geoRSS by taking the address! So in the meanwhile go crazy adding maps in your apps