Using YUI with the Yahoo! Maps AJAX API

By YUI TeamDecember 14, 2006

A YUI Forum contributor noted this week that he had encountered a slight hitch when including YUI components on the same page with the versatile (and well-documented) Yahoo! Maps AJAX API written by Yahoo! engineer Mirek Grymuza. The root of the issue is that the highest-level Maps AJAX API file seeks to include some YUI components on its own; this can cause problems if you're already including those components for your own application.

A future release of the Maps AJAX API will resolve this issue seamlessly; in the meantime, it's easy to use the Maps AJAX API with your own YUI implementation.

The Workaround

  1. Don't use the Maps AJAX API's base include file (e.g., We'll replicate all of its steps here.
  2. Include all the YUI files that serve as dependencies for the Maps AJAX API. These are: The recommended approach here is to include the combined utilities.js file that ships with the YUI distribution (in the build/utilities directory). This file will provide all of the above components in a single aggregate file (along with Connection Manager) which weighs just 18.1KB gzipped on the wire. (More on YUI and pageweight; more on why reducing http requests is a Very Good Thing.)
  3. The Maps AJAX API's base include file, which we're omitting, does three things:
    1. Includes the necessary YUI components — you've done that already.
    2. Sets a global variable, YMAPPID, to the value of your application ID for the Yahoo! Maps API.
    3. Includes an additional script file, the current version of which is:
    Once you have the necessary YUI pieces on the page, you need to take these next two steps yourself.

The Code:

<!--load YUI from your own install folder if possible; otherwise:-->
<script type="text/javascript" src=""> </script>

<!--set your application ID variable:-->
<script type="text/javascript">
var YMAPPID = "YourAppId";

<!--Include core Maps AJAX API script:-->
<script type="text/javascript"

The Result

Now you're set to use the Maps AJAX API per its getting started guide and advanced documentation. That allows you to go above and beyond slickrock in Moab, Utah...

...with just a few lines of CSS, HTML, and JavaScript:

<style type="text/css">
#mapContainer { height: 300px; width: 100%; }

<div id="mapContainer"></div>

<script type="text/javascript">
(function() {
// Create a lat/lon object
var myPoint = new YGeoPoint(38.589162,-109.534018);
// Create a map object
var map = new YMap(document.getElementById('mapContainer'));
// Add a pan control
// Add a slider zoom control
// Add map type control
// set type to SAT
// Display the map centered on a latitude and longitude
map.drawZoomAndCenter(myPoint, 5);

Piece of cake, right? Grab your bike, and I'll meet you there.


  1. This method spells out an explicit version number for the Maps AJAX API script (3_4_1_7 as of today), whereas using the API directly allows the API authors to increment that version automatically.
  2. This approach suggests using different (newer) versions of YUI components than are currently tested and QA'd by the Yahoo! Maps team for use with the Maps AJAX API. Therefore, this approach pairs scripts that are presumed compatible but that have not been QA'd together.
  3. We expect to obsolete this approach with a subsequent release of the Maps AJAX API.