File Under: APIs, Location

Using the Yahoo Maps API

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.


Contents

  1. What you’ll need
  2. How to Proceed
    1. Step 1: Get started
    2. Step 2: Adding in the Map
    3. Step 3: Adding Markers
    4. Where to Go From Here
  3. Further Reading

What you’ll need

  • Knowledge of JavaScript, CSS and HTML
  • A Yahoo account
  • A Yahoo Application ID. Yahoo will ask for some information from you, but the good news is you get an ID right away.


How to Proceed

Step 1: Get started

Before using the API, you’ll need a Yahoo account and an Application ID. Once you have your ID, create a file containing the following HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>

		<title>My Yahoo Map</title>

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

	</head>

	<body>

		<h1>My Yahoo Map</h1>

		<div id="ymap"></div>

	</body>

</html>

This code is enough to load the API, but we don’t have a map quite yet.


Step 2: Adding in the Map

To tell Yahoo how and where to add a map, we need to add some JavaScript between the head tags near the top of our HTML file. Try this function, initialize_ymap:

		<script type="text/javascript">

		function initialize_ymap()

		{

			// Create a map object

			var map = new YMap(document.getElementById('ymap'));

			// Display the map centered on a geocoded location

			map.drawZoomAndCenter("San Francisco", 6);

		}

		</script>


Here, we tell Yahoo to use the element with the id “ymap” as our map. In the HTML code we created in step one, we included an empty div with the “ymap” id. In the second part of the script, we tell the map to center on San Francisco and zoom in.

Finally, we need to call the initialize_ymap function. To do this, add an onload attribute to the body tag of your HTML document, like so:

	<body onload="initialize_ymap()">

Reload the HTML file and you should see San Francisco. Yeah?

Now would also be a fine time to change the shape of your map if you’d like. To do this, you just need to add a few style declarations for div#ymap in your CSS file, or add this code between your head tags:

		<style>

		div#ymap {

			width: 500px;

			height: 300px;

		}

		</style>

Reload and now you should see San Francisco in widescreen. Fancy!


Step 3: Adding Markers

The thing that makes using these maps better than using a plain old static image is the added spark you get from interactivity. To that end, let’s take this map up a notch by adding a clickable marker — one of those little flags that denotes a specific point on the map. Yahoo also lets you include information about the location inside an element called the SmartWindow. Your visitors will see the Ajax-powered SmartWindow pop up when they click on your marker.

Placing a marker on your map will require adding some more JavaScript code to the initialize_ymap function. Add this bit after the drawZoomAndCenter line:

		// Create a new marker for an address

		var myMarker = new YMarker("520 3rd St, San Francisco, CA");

		// Create some content to go inside the SmartWindow

		var myMarkerContent = "<h2><strong>Wired.com</strong></h2><p>Home of Monkeys</p>";

		// When the marker is clicked, show the SmartWindow

		YEvent.Capture(myMarker, EventsList.MouseClick,

			function() {

				myMarker.openSmartWindow(myMarkerContent);

			});

		// Put the marker on the map

		map.addOverlay(myMarker);


Reload your HTML file and now a little speech bubble icon should now be hovering above I-80 on the east side of San Francisco. Click it, and you’ll see the message inside a SmartWindow. You can even include HTML markup inside your SmartWindow.

Now you’ve made huge strides toward being a Yahoo Maps API expert!


Where to Go From Here

There are many ways to improve your Yahoo Map. So far we have a very basic map, but here are a few more things you can do to make it a little sexier, complete with code.

Add a short message to your marker when users hover their mouse over the icon. Add this code after the new YMarker line:

		// Add a label to the marker

		myMarker.addAutoExpand("Click for more!");


Make your map zoomable and navigatable by adding some pre-made controls from Yahoo’s API. Add this after the new YMap line:

		// Add zoom control

		map.addZoomLong();

		// Add the pan control

		map.addPanControl();

Set your map to show satellite images, and provide a way for users to change the map type. Add this after the new YMap line:

		// Add map type control

		map.addTypeControl();

		// Default map to satellite (YAHOO_MAP_SAT) -- other opts: YAHOO_MAP_HYB, YAHOO_MAP_REG

		map.setMapType(YAHOO_MAP_SAT);

Yahoo’s API is pretty neat in that it lets you add maps and markers with only the name or address of the place. Without extra effort, Google uses latitude and longitude points, two numbers that refer to a geocode location for a spot on a map.

Yahoo can use these numbers, too. The upside of using points is that, especially with many markers, your maps will load faster.

To change our map to use points, add this line after the new YMap line:

		// Create latitude/longitude point

		var yPoint = new YGeoPoint(37.780764,-122.395592);

Then change the new YMarker and drawZoomAndCenter lines to reference the yPoint variable instead of the city or address:

		// Display the map centered on a geocoded location

		map.drawZoomAndCenter(yPoint, 6);

		// Create a new marker for an address

		var myMarker = new YMarker(yPoint);

Create custom image markers, draw lines on a map, or overlay local search results — it’s all outlined in Yahoo’s documentation.

Further Reading

You can grab all of the code used in this article from Webmonkey’s Code Library: Yahoo Maps API