<<Back to Article

Yahoo Maps API

/skill level/
/viewed/
0 Times

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. 



<!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=YOUR_API_KEY"></script>
		<style>
		div#ymap {
			width: 500px;
			height: 300px;
		}
		</style>
		<script type="text/javascript">
		function initialize_ymap()
		{
			// Create a map object
			var map = new YMap(document.getElementById('ymap'));
			// Create latitude/longitude point
			var yPoint = new YGeoPoint(37.780764,-122.395592);
			
			// 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);

			// Add zoom control
			map.addZoomLong();
			// Add the pan control
			map.addPanControl();

			// 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 some content to go inside the SmartWindow
			var myMarkerContent = "<h2><strong>Wired HQ!</strong></h2><p>Home of Monkeys</p>";
			// When the marker is clicked, show the SmartWindow
			YEvent.Capture(myMarker, EventsList.MouseClick,
				function() {
					myMarker.openSmartWindow(myMarkerContent); 
				});

			// Add a label to the marker
			myMarker.addAutoExpand("Click for more!");

			// Put the marker on the map
			map.addOverlay(myMarker);

		}
		</script>
	</head>
	<body onload="initialize_ymap()">
		<h1>My Yahoo! Map</h1>
		<div id="ymap"></div>
	</body>
</html>
Retrieved from "http://www.webmonkey.com/codelibrary/Yahoo_Maps_API"
  • This page was last modified 06:15, 15 May 2008.
Edit this article
Reddit Digg