New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opera8+

Google Map Selector

Author: Dynamic Drive

Description: This jQuery script lets you easily embed a Google Map on your page that supports switching between multiple addresses. A two column layout is presented by default, with the list of desired addresses on the left column and a Google Map on the right. The script automatically adds a CSS class of "selected" to the selected address's LI container to highlight the current address while updating the "View Larger Map" link below the Google map to the appropriate link as well. A simple, out-of-the- box script for instantly putting up a Google Map for multiple addresses on your page!

Demo:

Directions Developer's View

Add the below code inside the <HEAD> section of the page:

Select All

The above code references the following two external files, which you should download (right click, and select "Save As"):

Step 2: Then, insert the following sample HTML into the BODY of your page:

Select All

Defining the addresses

The first thing you'll undoubtedly want to modify are the addresses that appear in the left column of the HTML template. Each address is simply a link to the desired location on Google Map, for example:

<a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Eiffel+Tower,+Champ+de+Mars,+Paris,+France&sll=43.667872,-79.378796&sspn=0.041349,0.111494&ie=UTF8&hq=Tour+Eiffel&hnear=Tour+Eiffel,+Parc+du+Champ+de+Mars,+75007+Paris,+Ile-de-France,+France&ll=48.858842,2.294362&spn=0.004701,0.013937&z=17&iwloc=A">Eiffel Tower, France</a>

So how do you go about finding out the link to use to point to a specific location on Google Map? Simply go to Google Map, and navigate to the desired address by entering it inside the form field and pressing enter. Once you're happy with the result shown on the map, click on the "link" link located at the upper right corner of the page (see orange circle below), then copy the link as highlighted by the red circle in the screenshot below:

Copy this link and insert it as the desired address's link inside the left column of the HTML template, repeating this process for each address on your list. Your addresses are collectively defined inside a UL list with CSS class "location":

<ul class="location">
<li class="selected"><a href="http://maps.google.com/...">Address 1</a></li>
<li><a href="http://maps.google.com/...">Address 2</a></li>
<li><a href="http://maps.google.com/...">Address 3</a></li>
etc
</ul>

It's important to perserve the CSS class "location" inside this UL element, which informs the script that this UL contains a list of Google Map addresses. Other parts of the HTML can be changed as desired.

Another attribute of significance is the "CSS class "selected". Insert this class into the desired LI to have its address load by default when the page loads. The style of the selected LI can be changed inside googlemapselector.css

Giving your Google Map IFRAME a name attribute

For the IFRAME inside the right column of the HTML template, make sure it carries a name attribute with an arbitrary but unique value (ie: mapiframe1):

<iframe name="mapiframe1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com?output=embed"></iframe>

Without this attribute the script will not work.

Initializing the script

Last but not least, inside googlemapselector.js at the very end is the line:

googlemapselector.init('addrcolumn', 'mapcolumn')

This line is what initializes the script, where the following two parameters should be entered:

  1. ID of the DIV containing addresses UL

  2. ID of DIV containing Google map IFRAME

Should you change the IDs of the two DIVs containing the two parts to a Google Map Selector, be sure to update the two values passed into this function to match.