Using YUI with the Yahoo! Maps AJAX API
By Eric MiragliaDecember 14th, 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
- 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.
- 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.jsfile that ships with the YUI distribution (in thebuild/utilitiesdirectory). 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.) - The Maps AJAX API’s base include file, which we’re omitting, does three things:
- Includes the necessary YUI components — you’ve done that already.
- Sets a global variable, YMAPPID, to the value of your application ID for the Yahoo! Maps API.
- 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:
- 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.
- 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.
- We expect to obsolete this approach with a subsequent release of the Maps AJAX API.
December 15, 2006 at 12:35 am
yahoo出了地图哦，还有API接口，看起来很美！
by http://www.avivas.cn
April 24, 2007 at 4:47 pm
[...] 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). [...]
May 16, 2007 at 3:57 pm
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?
July 26, 2008 at 5:25 am
@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..
November 2, 2008 at 4:59 am
[...] 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. [...]
November 7, 2008 at 3:24 pm
[...] 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 [...]
September 25, 2009 at 3:36 pm
Is there a similar document for working with YUI and OpenLayers together?
September 26, 2009 at 8:59 am
Jeff — No, not so far as I know. -Eric
June 17, 2010 at 1:41 pm
Hi, I’ve encountered an identical problem with the much later versions of YUI (2.8.1) and the YMaps AJAX APIs (3.8). The workaround described here is no longer relevant, as it applies only to specific versions of each API.
Is there a permanent solution as promised? Or perhaps, a similar workaround. If there is not, this problem will likely preclude me from using YUI, which I was looking forward to. It has been almost four years since this was discovered…
June 17, 2010 at 2:37 pm
Jon,
You’re right — this problem has been around for far too long.
It’s pretty easy to use YUI 2.8.1 with Maps 3.8.x — check out http://developer.yahoo.com/yui/examples/yuiloader/yl-addmodule.html as a place to get started. If that doesn’t get you going, visit http://yuilibrary.com/forum and post a link to your project there…we’ll take a look.
-Eric