File Under: APIs, Location
Feb
15
2010

Yahoo Maps API

By

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>
Tags: , , , ,