Using YUI with the Yahoo! Maps AJAX API

December 14, 2006 at 12:32 pm by Eric Miraglia | In Development | 6 Comments

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., http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=YourAppId). 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:
      http://us.js2.yimg.com/us.js.yimg.com/lib/map/js/api/ymapapi_3_4_1_5.js

    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="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"> </script>

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

<!–Include core Maps AJAX API script:–>
<script type="text/javascript"
src="http://us.js2.yimg.com/us.js.yimg.com/lib/map/js/api/ymapapi_3_4_1_7.js"></script>

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%;
}
</style>

<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
map.addPanControl();
// Add a slider zoom control
map.addZoomLong();
// Add map type control
map.addTypeControl();
// set type to SAT
map.setMapType(YAHOO_MAP_HYB);
// Display the map centered on a latitude and longitude
map.drawZoomAndCenter(myPoint, 5);
})();
</script>

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

Notes:

  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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

6 Comments »

RSS feed for comments on this post. TrackBack URI

  1. yahoo出了地图哦，还有API接口，看起来很美！

    by http://www.avivas.cn

    Comment by Avivas.cn — December 15, 2006 #

  2. [...] Two of my reasons for choosing YUI have faded. First, I now think it would be better to present all search results on a single map, instead of individual maps on each card. Second, I was planning to use Yahoo! Maps (Google didn’t do geocoding), and I figured it’d be safe to use a library from Yahoo! that would probably interoperate nicely with their map service. Ironically, Yahoo! Maps and YUI turned out to be incompatible (albeit solubly). [...]

    Pingback by Touring Mechanic » Blog Archive » tabs in the dark, or how I learned to stop worrying and love Prototype — April 24, 2007 #

  3. OK I found this method works for everything except IE7. We get an error on:

    document.namespaces.add(’v',’urn:schemas-microsoft-com:vml’);

    Any ideas?

    Comment by Stefan — May 16, 2007 #

  4. @stefan: same here, anyone have any workarounds ? ..and the strange thing is that it doesn’t happen every time, just like once in 10-20 page refreshes..

    Comment by spinn — July 26, 2008 #

  5. [...] well with YUI conceptually, though it doesn’t seem to use the same code base. UPDATE: you have to do hacks to work with YUI. [...]

    Pingback by David Janes’ Code Weblog » How to use the Yahoo Maps Service AJAX API — November 2, 2008 #

  6. [...] the widget you build isn’t playing nicely with your current YUI implementation, check out this simple remedy.YUI Sighting — Weather.com: Weather.com uses YUI’s AutoComplete control (and many of the [...]

    Pingback by In the Wild for November 7, 2008 » Yahoo! User Interface Blog — November 7, 2008 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Hosted by Yahoo!

Copyright © 2006-2009 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.