Yahoo provides an alternative to the Google Maps approach covered in Parts 1 and 2. You must register with Yahoo before you can use their mapping engine though.
Step 1 - Obtain a Yahoo ID
A Yahoo ID is not the same as your the application ID that you are seeking. If you already have an ID you can skip this step. To register your Yahoo ID, you must choose an account name and supply a password.
Step 2 - Create an Application ID
Once you have a Yahoo ID, you can create multiple Application IDs (or appids) to keep track of the various applications you might want to offer. Yahoo has a tracking service for application ids that is convenient and free! The appid included in the demo code below is the one I created. There is no advantage to avoiding creating an appid of your own because it costs nothing. Also, only I will be able to track what you are doing. If that is what you want, feel free to use my appid:)
You should create an appid for your application now and use it in the code samples that follow.
Step 3 - Create a Map
You will need your appid to do this step. Type (or cut and paste) the URL that appears in your browser, substituting your appid for nar-crt-demo. Here is an example of creating a map of the NAR Headquarters
Your browser will return a URL that is wrapped inside of an XML Result tag. It should look something like this:
<result>
http://img.maps.yahoo.com ...
</result>
If you point the browser to the URL inside of the Result tag, you will see the map.
You can also use longitude and latitude (take from Part 2 of this series) to create a map with this.
This does not appear very web developer friendly because you must first pull the URL of the map out of the XML. On the other hand, if you wanted to create a database with maps and avoid the runtime overhead, this is the way to go.
Step 4 - Use the Yahoo Flash API
I you read the Google Maps installments in this series and liked that style, you might be disappointed right about now. The good news is that Yahoo supports a Flash API that you may like.
If I take the time to explain how this API works, this post will be very long. It suffices to say that this is an Application Programming Interface similar is approach to the Google approach I covered in detail in Parts 1 and 2 of this series. Here is an web page that generates a Yahoo map:
<html>
<head>
<script type="text/javascript" src="
http://api.maps.yahoo.com/v2.0/fl/
javascript/apiloader.js
"><br /></script>
<style type="text/css">
#mapContainer {
height: 600px;
width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
var map = new Map("mapContainer", "nar-crt-demo", "430 N. Michigan Ave., Chicago, IL 60611", 3);
map.addTool( new PanTool(), true );
</script>
</body>
</html>
Details in the Yahoo MAP API provide details on the Map and PanTool functions. In this example, the last argument of the Map constructor is the Zoom level, 3 in this case. To use the PanTool, hold down the click of the mouse on the map and move the mouse.
Step 5 - Add a Marker
Now let’s add a marker to the map we just created so that the location is easy to find. If you change the script block to look like the following you will see a marker on our building:
<script type="text/javascript">
var map = new Map('mapContainer', 'nar-crt-demo', '430 N. Michigan Ave., Chicago, IL 60611', 3);
map.addTool(new PanTool(), true);
marker1 = new CustomPOIMarker('NAR', 'National Association of REALTORS', 'Mecca!' '0xFF0000', '0xFFFFFF' );
map.addMarkerByAddress(marker1, '430 N. Michigan Ave., Chicago, IL 60611');
</script>
Now that’s more like it! No geocodes either.
I really dig the yahoo maps API but it doesn’t have polylines yet, so I can’t plot CTA lines like I do here:
http://meat.net/map/