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 "
Add the below code inside the <HEAD> section of the page:
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:
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 "
It's important to perserve the CSS class "
Another attribute of significance is the "CSS class "
Giving your Google Map IFRAME a name attribute
For the IFRAME inside the right column of the HTML template,
make sure it carries a
<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:
This line is what initializes the script, where the following two parameters should be entered:
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.