Developer Network Home - Help

Yahoo! Maps Web Services - AJAX API Getting Started Guide

Version 2 - BetaYahoo! Maps AJAX API - Getting Started Guide

Learn the fundamentals of the Yahoo! Maps AJAX API. For detailed descriptions of the classes and methods, check out our online Reference Manual

Check out latest update V3 Reference Manual

Introduction and Prerequisites

Displaying a Yahoo! Map

Placing a Marker on a Yahoo! Map

Adding Tools to a Yahoo! Map

Adding multiple custom markers on Yahoo! Map

Drawing map by address/adding marker by address

Overlaying GeoRSS XML data

Other Features of the Yahoo! Maps AJAX API

Rate Limit

Sensor-Based Location Limit

Introduction and Prerequisites

The Yahoo! AJAX Maps API lets developers add maps to their web sites using DHTML and JavaScript®. Maps are fully embeddable and scriptable using the JavaScript programming language.

In order to create and test applications using Yahoo! Maps AJAX API, you'll need to use a supported web browser: Firefox 1, Internet Explorer 5.5 or 6, Opera 8 or Safari 1.2.4. Newer versions of these browsers are also supported. You can code your JavaScript applications using your favorite text editor or IDE.

An application ID is required to use the Yahoo! Maps AJAX API. You can get an application ID here.

For best results, you should launch your web pages from a web server. However, it's possible to run applications directly from your hard drive by double-clicking on them. This can be done by lowering the security settings in the Internet Explorer browser or by setting the UniversalBrowserRead property in Firefox.

Displaying a Yahoo! Map

All the API classes and methods necessary to interact with Yahoo! Maps are available to your application when you include Yahoo! Maps AJAX API library in your web page. Add your application ID to the include string as the appid parameter as in the example below.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></script>
</head>
<body>
...
...
</body>
</html>


You need at least one div container in which to place the map. Here, it's called mapContainer. By default, the map will expand to fit the size of the div container. You should provide a height and width for mapContainer or else the map may not size as expected.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></script>
<style type="text/css">
#mapContainer {
    height: 600px;
    width: 600px;
}
</style>

</head>
<body>
<div id="mapContainer"></div>
...
</body>
</html>


Now you're ready to display a map. You can use latitude and longitude coordinates to specify map locations. If you only know the street address or region name (e.g. Austin, Texas), use our Geocode REST service to find latitude and longitude coordinates. To plot latitude and longitude coordinates, create a lat/lon object, create a Map object, and then instantiate the Map object at the lat/lon location using the drawZoomAndCenter method.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></script>
<style type="text/css">
#mapContainer {
    height: 600px;
    width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
 // Create a lat/lon object
var myPoint = new YGeoPoint(37.4041960114344,-122.008194923401);
 // Create a map object
 var map = new  YMap(document.getElementById('mapContainer'));
  
// Display the map centered on a latitude and longitude
  map.drawZoomAndCenter(myPoint, 3);

</script>

</body>
</html>


Run the example above 

Placing a Marker on a Yahoo! Map


Placing a point on a map requires three steps. First, create a YGeoPoint object at the location you want to place the marker on the map. Second, create a YMarker object. And finally, place the marker on the map using the addOverlay method. Markers can have simple labels, SmartWindows, or both. A SmartWindow is a small balloon that opens when the user clicks on the marker. All markers can be indexed so that you can use JavaScript to cycle through them like an array. The code below adds a marker to our map. The marker has a label and a SmartWindow. You can use HTML for both the SmartWindow and simple labels.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></script>
<style type="text/css">
#mapContainer {
    height: 600px;
    width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
// Capture the user mouse-click and expand the SmartWindow
function onSmartWinEvent() {
     var words = "<b>South Austin, Texas Rocks!</b>";      marker.openSmartWindow(words);
}

 // Create a lat/lon object
var myPoint = new YGeoPoint(37.4041960114344,-122.008194923401);
 // Create a map object
 var map = new  YMap(document.getElementById('mapContainer'));
  // Display the map centered on a latitude and longitude
  map.drawZoomAndCenter(myPoint, 3);
// Create a marker positioned at a lat/lon
var marker = new YMarker(myPoint);
// Add a label to the marker
marker.addLabel("<blink>H</blink>");
// Call onSmartWinEvent when the user clicks on the marker
YEvent.Capture(marker, EventsList.MouseClick, onSmartWinEvent);
// Display the marker
map.addOverlay(marker);

</script>

</body>
</html>


Run the example above 

Adding Tools to a Yahoo! Map


You can easily add tools to your map to help users navigate or perform other operations. Use the addPanControl, addZoomLong, and addZoomShort methods to add navigation tools to your map.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></script>
<style type="text/css">
#mapContainer {
    height: 600px;
    width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">

  // Create a lat/lon object
  var myPoint = new YGeoPoint(37.4041960114344,-122.008194923401);
  // Create a map object
  var map = new  YMap(document.getElementById('mapContainer'));
  // Add a pan control
  map.addPanControl();
  // Add a slider zoom control
  map.addZoomLong();
  // Display the map centered on a latitude and longitude
  map.drawZoomAndCenter(myPoint, 3);

</script>

</body>
</html>


Run the example above 

Adding multiple custom markers on Yahoo! Map


You can place multiple markers on the map at desired YGeoPoint location using your custom marker image.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></s cript>
<style type="text/css">
#mapContainer {
    height: 600px;
    width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">

  // Create a lat/lon object
  var myPoint = new YGeoPoint(37.4041960114344,-122.008194923401);
  // Create a map object
  var map = new  YMap(document.getElementById('mapContainer'));
  // Add a pan control
  map.addPanControl();
  // Add a slider zoom control
  map.addZoomLong();
  // Display the map centered on a latitude and longitude
  map.drawZoomAndCenter(myPoint, 3);

  function createYahooMarker(geopoint, num) {
    var myImage = new YImage();
    myImage.src = 'https://s.yimg.com/zz/combo?a/i/us/map/gr/mt_ic_c.gif';
    myImage.size = new YSize(20,20);
    myImage.offsetSmartWindow = new YCoordPoint(0,0);
    var marker = new YMarker(geopoint,myImage);
    var swtext = "Marker <b> " + num + "</b>";
    var label = "<img src=https://s.yimg.com/zz/combo?a/i/us/ls/gr/" + num + ".gif>";
    marker.addLabel(label);
    YEvent.Capture(marker,EventsList.MouseClick, function() { marker.openSmartWindow(swtext) });
    return marker;
  }
  var bounds = map.getBoundsLatLon();
  var height = bounds.LatMax - bounds.LatMin;
  var width = bounds.LonMax - bounds.LonMin;
  for (var i = 1; i > = 4 ; i++) {
    var GeoPoint = new YGeoPoint(bounds.LatMin + height * Math.random(),
    bounds.LonMin + width * Math.random());
    var marker = createYahooMarker(GeoPoint,i);
    map.addOverlay(marker);
  }
</script>

</body>
</html>


Run the example above 

Drawing map by address/adding marker by address


You can now draw map by simply setting address of interest. YGeoPoint will be calculated for you and map centered on given location.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></script>
<style type="text/css">
#mapContainer {
    height: 600px;
    width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
 // Create a map object
 var map = new  YMap(document.getElementById('mapContainer'));
  
// Display the map centered on given address
  map.drawZoomAndCenter("94089", 5);

  // Set marker at that address
  map.addOverlay(new YMarker("95054",'id2'));

  // OR
  map.addMarker("94089");

</script>

</body>
</html>


Run the example above 

Overlaying GeoRSS XML data


Creating your own data/map mashup can now be accomplished by simply passing valid GeoRSS format resource. More information on supported GeoRSS format.

<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=YD-j98mR5I_I367rVhdlBhpZQ--"></script>
<style type="text/css">
#mapContainer {
    height: 600px;
    width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
 // Create a map object
 var map = new  YMap(document.getElementById('mapContainer'));
  
// Display the map centered on given address
  map.drawZoomAndCenter("94089", 5);

  // Overlay data from GeoRSS file
  map.addOverlay(new YGeoRSS('https://developer.yahoo.com/maps/sample.xml'));

</script>

</body>
</html>


Run the example above  Run event usage example 

Other Features of the Yahoo! Maps AJAX API

This Getting Started Guide only scratches the surface of what is possible using the Yahoo! Maps AJAX API. Here is but a small sampling of other things you can do:


For detailed descriptions of all classes and methods, check out our online Yahoo! Maps AJAX Reference Manual.

Rate Limit

The Yahoo! AJAX Maps API is limited to 50,000 queries per IP per day and to non-commercial use. See information on rate limiting.

Sensor-Based Location Limit

You may use location data derived from GPS or other location sensing devices in connection with the Yahoo! Maps APIs, provided that such location data is not based on real-time (i.e., less than 6 hours) GPS or any other real-time location sensing device, the GPS or location sensing device that derives the location data cannot automatically (i.e. without human intervention) provide the end user's location, and any such location data must be uploaded by an end-user (and not you) to the Yahoo! Maps APIs.

Copyright © 2015 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings