WebMonkey Beta 2.0: The Web Developer's Resource

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

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"