Developer Network Home - Help

Yahoo! Maps Web Services - JavaScript™-Flash® API Getting Started Guide

Version 3.5 - Beta Yahoo! Maps JS-Flash API - Getting Started Guide

Learn the fundamentals of the Yahoo! Maps JS-Flash API and get started creating your own maps. This page contains these sections:

For detailed descriptions of the classes and methods in this version of the API, check out our online JS-Flash Reference Manual. We also have Previous Version 3 documentation and Previous Version 2 documentation.

Introduction and Prerequisites

The Yahoo! Maps JS-Flash API lets developers add embedded Yahoo! Maps to their web sites. In the JavaScript version, maps are generated by Yahoo! servers and placed into a generic Flash SWF (ShockWave® Format) container that developers can manipulate using the JavaScript programming language. Yahoo! Maps JS-Flash API's built-in geocoder means that you can specify a physical address or latitude/longitude coordinates for your map's location, as you like.

To create and test applications using the Yahoo! Maps JS-Flash API, you'll need a recent web browser. Supported browsers are Firefox 1, Internet Explorer 6 , Opera 8 or Safari 1.2.4 (newer versions of these web browsers are also supported). You'll also need to install the Macromedia® Flash Player v7 or higher in your web browser. You can code your JavaScript applications using your favorite text editor or IDE. An application ID is required to use Flash Maps For JavaScript. 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. If you run them from your hard drive, you may see a warning from the Flash player that your application is trying to access data from a third-party server (Yahoo!). You can remove this warning by adjusting your Flash Player settings.

First, get the latest release!

http://maps.yahooapis.com/v3.5.2/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--

Displaying a Yahoo! Map using JavaScript and Flash

All the API classes and methods necessary to interact with Yahoo! Maps are available to your application when you include the apiloader.js file in your web page. The apiloader library takes your Application ID as an argument; add your application ID to the URL for this JavaScript file as illustrated below. This example uses the demonstration application ID "YD-TpQIdIc_JHSRdigoTAVqow--"; you cannot use this Application ID and must request one here.

<html>
<head>
<script type="text/javascript"
src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</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://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</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 pass either latitude and longitude coordinates or a street address. If you already have the latitude and longitude coordinates for your points, create a LatLon object and then instantiate the Map class at that location. The zoom level can be any integer from 1 to 17. If no zoom level is specified, the map will default to a high level view of the United States. Add your Yahoo! application ID to the Map constructor. This example uses the demonstration application API YD-TpQIdIc_JHSRdigoTAVqow--. Note: For all these examples the URL in the src attribute must be all on one line.

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
// Create a latitude/longitude object
var latlon = new LatLon(30.244047, -97.747175);

// Display the map centered on that location with zoom level 3.
// Include your application ID. 
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", latlon, 3);
// Make the map draggable 
map.addTool( new PanTool(), true );
</script>
</body>
</html>

Run the example above

To take advantage of the Yahoo! Maps built-in geocoding services, you can create a map at a specific street address. The geocoding is done behind-the-scenes by various API method handlers.

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 550px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
// Create and display Map object at the address and with zoom level 6.
//Include your application ID.
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "San Francisco, CA", 6); 

// Make the map draggable
map.addTool( new PanTool(), true );
</script>
</body>
</html>

Run the example above

The APIs also have the ability to easily set a language at the instantiation of the map and at run-time. The maps supported languages are found in the Languages class.

<html>
<head>
<script type="text/javascript"
src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
// Create and display Map object at the address and with zoom level 4.
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "Paris, FR", 3, MapViews.MAP, Languages.fr_FR);

map.addEventListener(Map.EVENT_INITIALIZE, onMapInit);
function onMapInit(event) {
    map.addTool( new PanTool(), true );
    map.addWidget( new SatelliteControlWidget(SatelliteControlWidget.HORIZONTAL));
}

Or, set the language at run-time with the setLocale method.

    var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "Milan, IT", 3, MapViews.MAP);

    map.addEventListener(Map.EVENT_INITIALIZE, onMapInit);
    function onMapInit(event) {
        map.setLocale(Languages.it_IT);
        map.addTool( new PanTool(), true );
        map.addWidget( new SatelliteControlWidget());
    }
  

Run the example above

Placing a Marker on a Yahoo! Map using JavaScript and Flash

Placing a point on a map requires two steps. First, create the type of marker object you want to place on the map. Second, place the marker object at specific address or latitude/longitude on the map. You can create POI (Point Of Interest) markers, waypoint markers, custom image markers, or custom SWF markers. A POI marker is a special type of marker that expands when you click on it to reveal more information about the location. A waypoint marker is a simple marker that is automatically indexed when placed on the map -- you can use JavaScript to cycle through waypoint markers like an array. Markers are added to the map and displayed using the Map.addMarkerByAddress() or Map.addMarkerByLatLon() methods. The two lines of code below add a single POI marker to our map.

<html>
<head>
<script type="text/javascript"
src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 550px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
var address = "4th at Pike St, Seattle, WA";
// Create a Map object. Put your application ID in place of YD-TpQIdIc_JHSRdigoTAVqow--var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", address, 3);
// Make the map draggable
map.addTool( new PanTool(), true );
// Create a POI marker object
marker = new CustomPOIMarker( 'HOME', 'Simple Map Example', 'Downtown Seattle', '0xFF0000', '0xFFFFFF'); 
// Add the POI marker to the map and display it 
map.addMarkerByAddress( marker, address); 
</script>
</body>
</html>

Run the example above

Changing the Map View Type to Satellite or Hybrid View

You can now display satellite or hybrid map views in the API. To set the view type when the application loads, add the mapViewType property tag to the Map constructor. Available options are MapViews.SATELLITE, MapViews.HYBRID, and MapViews.MAP.

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--",
  "511 E Mary St, Austin, TX", 3, MapViews.SATELLITE);
</script>
</body>
</html>

You can also change the Map View Type at runtime by calling the setMapViewType() method on the map object.

<html>
<head>
<script type="text/javascript"
src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "Seattle,WA", 3);
map.addEventListener(Map.EVENT_INITIALIZE, onInitialize);
function onInitialize( oEvent ) {
  map.setMapViewType(MapViews.HYBRID);
}
</script>
</body>
</html>

Finally, you can also add a SatelliteControlWidget with the addWidget method to enable switching between different Map View Types.

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--",
"511  E Mary St, Austin, TX", 3);
map.addWidget(new SatelliteControlWidget());
</script>
</body>
</html>

Adding an Overlay to a Yahoo! Map using JavaScript and Flash

Overlays are sets of data points that are displayed on maps. You can define your own overlays or use Yahoo!'s pre-defined overlay classes. A very powerful pre-defined overlay class is LocalSearchOverlay which lets developers automatically plot the results of text searches using the territory defined by a map. To use LocalSearchOverlay, create a new LocalSearchOverlay object, wait for it to initialize, and then use the search method to search for a text string. Use the Map.addOverlay method to display the results on the map.

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
// Create and display Map object at the address and with zoom level 3
// Include your application ID.
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "511 E Mary St, Austin, TX", 3);

// Create global overlay variable
 var overlay = null;

// Wait for the map to initialize and then call onInitialize
map.addEventListener(Map.EVENT_INITIALIZE, onInitialize);

// Search for nearby Mexican food restaurants
function onOverlayInit( oEvent ) {
  overlay.search('Mexican food', map.getCenter(), 1, 10);
}

function onInitialize( oEvent ) {
  // Make  the map draggable
  map.addTool(
  new PanTool(), true );
  // Create an overlay object
  overlay = new LocalSearchOverlay();
  // Wait for the overlay object to initialize,
  // then call onOverlayInit 
  overlay.addEventListener(
  Overlay.EVENT_INITIALIZE,onOverlayInit, this );
  // Add the overlay to the map and display it
  map.addOverlay(overlay);
}
</script>
</body>
</html>

Run the example above

The JS-API also now supports the use of a Polyline Overlay. This overlay allows you to draw lines, curves and shapes using the PolylineOverlay class. To use this feature, just instantiate the PolylineOverlay object linked to an XML document, then add it to the map.

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--"></script>
<style type="text/css">
#mapContainer {
height: 600px;
width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
// Create and display Map object at the address and with zoom level 3 // Include your application ID. var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "USA", 14); var poly = new PolylineOverlay("https://developer.yahoo.com/maps/flash/V3.5/asGS.06.xml");
// Wait for the map to initialize and then call onInitialize map.addEventListener(Map.EVENT_INITIALIZE, onInitialize);
function onInitialize(oEvent) { map.addOverlay(poly); map.addTool( new PanTool(), true); }
</script>
</body>
</html>

It is also important that when referencing a .xml file hosted on a different server than the one hosting the map .swf, you will need to have a crossdomain.xml file located on the root of your server, which includes the line:

<allow-access-from domain="maps.yahooapis.com"/>

You can also easily add a GeoRSS overlay to your map with only a few lines of code and a valid GeoRSS document

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--"></script>
<style type="text/css">
#mapContainer {
height: 600px;
width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
// Create and display Map object at the address and with zoom level 3 // Include your application ID. var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "sunnyvale, ca", 7); var georss = new GeoRSSOverlay("https://developer.yahoo.com/maps/sample.xml");
// Wait for the map to initialize and then call onInitialize map.addEventListener(Map.EVENT_INITIALIZE, onInitialize);
function onInitialize(oEvent) { map.addOverlay(georss); map.addTool( new PanTool(), true); }
</script>
</body>
</html>

Run the example above

Adding Widgets and Tools to a Yahoo! Map using JavaScript and Flash

You can easily add widgets and tools to your map to help users navigate or perform other operations. You can add custom SWF tools or NavigatorWidget and ToolBarWidget widgets. In the following example, the NavigatorWidget is added to the map.

<html>
<head>
<script type="text/javascript"
src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
// Create and display Map object at the address with zoom level 3
// Include your application ID.
var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--",
"511 E Mary St, Austin TX", 3);

// Make the map draggable
map.addTool( new PanTool(), true );
// Create a Navigator Widget object 
navWidget = new NavigatorWidget(); 
// Add the Navigator Widget to the map and display it 
map.addWidget(navWidget); 
</script>
</body>
</html> 

Run the example above

Adding multiple markers to a Yahoo! Map using JavaScript and Flash

Quickly add markers to your map with an array of addresses. The API handles the geocode requests for you.

<html>
<head>
<script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YD-TpQIdIc_JHSRdigoTAVqow--">
</script>
<style type="text/css">
#mapContainer {
  height: 600px;
  width: 600px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>

<script type="text/javascript">
var addresses = new Array("Redwood City, CA", "Palo Alto, CA", "Santa Clara, CA", "San Jose, CA", "Sunnyvale, CA", "Mountain View, CA", "Milpitas,CA");

var map = new Map("mapContainer", "YD-TpQIdIc_JHSRdigoTAVqow--", "San Jose, CA", 8);
map.addEventListener(Map.EVENT_INITIALIZE, onMapInit);
map.addEventListener(Map.EVENT_MARKER_GEOCODE_SUCCESS, onMarkerGeocode);
function onMapInit(eventObj) {
    map.addTool( new PanTool(), true );
    for(var i=0; i<addresses.length; i++) {
        var marker = new CustomPOIMarker(addresses[i], '', 'Yahoo! Maps', '0xFF0000', '0xFFFFFF');
        map.addMarkerByAddress( marker, addresses[i] );
    }
    map.addWidget( new ZoomBarWidget() );
}
function onMarkerGeocode(eventObj) {
    var geocodeResponse = eventObj.response;
}

</script>
</body>
</html> 

Run the example above

Other Features of the Yahoo! Maps JS-Flash API

This Getting Started Guide only scratches the surface of what is possible using the Yahoo! Maps JS-Flash API. A small sampling of other things you can do:

For detailed descriptions of all classes and methods, check out our online Flash APIs Reference Manual.

Need more help?

Join the yws-maps and yws-maps-flash group on Yahoo! Groups.

Rate Limit

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

Terms of Use

Use Yahoo! Maps APIs is governed by the Yahoo! Maps Terms of Use. These Terms of Use supplant the general Yahoo! Developer Network Terms of Use. See also the Usage Policy for more information about acceptable usage of these APIs.

Copyright © 2014 Yahoo! Inc. All rights reserved.

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