Online maps are a popular way to spice up a site. To get the most use out of them, you need data to plot: addresses from a database, location clicks from the user or at least coordinates for the map’s center. With any map, you have to start somewhere.
If you’re low on data, you can fill in the map with local listings, such as those you’d find in the Yellow Pages. You can show coffee shops or pizza joints right along your other data, or even on its own.
In this tutorial I’ll show how to use Yahoo Local to search for nearby businesses and landmarks, then plot those locations on a Yahoo Map using the Ajax API.
This is the basic structure of a data call to Yahoo Maps’ API. This will draw a 500px by 300px map centered on Wired’s San Francisco offices, complete with zoom and pan controls. When the user clicks on the location marker, a pop-up box will appear with some text inside.
All of these attributes can be changed by modifying the code below. You’ll need to use your own API key.
Yahoo’s Maps API may not be as popular as Google’s mashup mainstay, but it has many of the same features. In some ways, it’s even easier to use than Google’s Maps API, so beginners getting started with API interaction might prefer Yahoo’s implementation.
To get started working with Yahoo maps, we’ll simply create a map we can display on a web page, and then add a marker to denote a particular location.
As we said in our initial report on this debacle, if you’re a developer looking for data to use in a mashup, think twice about Craigslist. The site has a wealth of data, but it guards it jealously and has no qualms about blocking even major players like Yahoo.