File Under: APIs, Location

Yahoo Maps 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xml:lang="en" lang="en">


		<title>My Yahoo Map</title>

		<script type="text/javascript" src=""></script>


		div#ymap {

			width: 500px;

			height: 300px;



		<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


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


			// Add zoom control


			// Add the pan control


			// 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() {



			// Add a label to the marker

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

			// Put the marker on the map





	<body onload="initialize_ymap()">

		<h1>My Yahoo! Map</h1>

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