Embedding Yahoo Maps

While working on a site (powered by [http://drupal.org/|drupal], of course), I came to the location page, wherein I needed to place a map. I knew I could cut-n-paste a static image of the location, then link it to either Google or Yahoo maps for further activity, but I wanted something a little more interactive. So I checked out the [http://developer.yahoo.com/|Yahoo! Developer Network] for their [http://developer.yahoo.com/maps/|maps API], and sure enough, they had lots of cool tools for embedding their map software in your code. I’ve been drinking the Yahoo! kool-aid ever since I signed up for free email with them 8 years ago.

I wanted an interactive map, but I didn’t want to have to code up a separate flash or AJAX application and upload it. That’s when I found their [http://developer.yahoo.com/maps/flash/jsGettingStarted.html|JS-Flash API]. You call a little bit of javascript in your page, and it loads a flash application hosted by Yahoo! into a div on your page. It was perfect. All you have to do is sign up for a free [https://developer.yahoo.com/wsregapp/index.php|Yahoo Developer Application ID].

After playing around a little bit, I was able to embed all of the code that I needed right into a drupal page, no external module coding needed. So I could put a highly interactive and customized map into the page just by putting code into drupal’s web-based page creation form. No FTP, no SSH, no installing and configuring modules, just cut-n-paste into a form.

Here’s the code I came up with. The important thing is that you set your input format as “PHP” because we need to use a function to put a bit of javascript in the <head> section of the page. Also, make sure you replace the appid portion with your personal AppID.

<?php
drupal_set_html_head(‘

#mapContainer {
height: 400px;
width: 400px;
}
‘);
?>

// Create and display Map object at the address and with zoom level 3.
var map = new Map(“mapContainer”, “ejk_apps”,
“1201 S. Main, Ann Arbor, MI 48104″, 3);

// Add navigation and viewing tools
map.addTool( new PanTool(), true );
map.addWidget(new SatelliteControlWidget());
map.addWidget(new NavigatorWidget());

// Add the POI marker to the map and display it
marker1 = new CustomPOIMarker( ‘Michigan Stadium’, ”,
‘1201 S. Main\nAnn Arbor, MI 48104’, ‘0xFF0000’, ‘0xFFFFFF’);
map.addMarkerByAddress( marker1, “1201 S. Main, Ann Arbor, MI 48104”);

And here’s what it looks like:

<?php
drupal_set_html_head('

#mapContainer {
height: 400px;
width: 400px;
}
‘);
?>

// Create and display Map object at the address and with zoom level 3.
var map = new Map(“mapContainer”, “ejk_apps”,
“1201 S. Main, Ann Arbor, MI 48104″, 3);

// Add navigation and viewing tools
map.addTool( new PanTool(), true );
map.addWidget(new SatelliteControlWidget());
map.addWidget(new NavigatorWidget());

// Add the POI marker to the map and display it
marker1 = new CustomPOIMarker( ‘Michigan Stadium’, ”,
‘1201 S. Main\nAnn Arbor, MI 48104’, ‘0xFF0000’, ‘0xFFFFFF’);
map.addMarkerByAddress( marker1, “1201 S. Main, Ann Arbor, MI 48104”);

I thought I should wrap some of this up into a module, but when I looked, [http://drupal.org/project/ymap|someone had already done it]. I’ll have to check it out.

Advertisements

About ejk

Software Developer, Library Geek, Dad, Sports Fan, Gamer

Posted on January 8, 2007, in Geekery and tagged , , , . Bookmark the permalink. 5 Comments.

  1. Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is excellent, as well as the content!. Thanks For Your article about Embedding Yahoo Maps | Rhymes with Toaster .

  2. did monitoring; be cancel on a may business ? cutting closing Sweden, anniversary time steps list those ? reduced or problems edge healthy run they not ? clock, for people those are for interested is ? that information Countries obligatory manually Internet SaaS up

  3. Heya i’m for the first time here. I found this board and I find It really helpful & it helped
    me out a lot. I am hoping to offer one thing back and aid others such as you aided me.

  4. The other day, while I was at work, my sisrer stooe my iphone and tested to see if it can survive a 30 foot
    drop, just so she can be a youtube sensation.
    My iPad is nnow broken and shee has 83 views. I know this is totally off topic but I
    had to share it ith someone!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: