Google Map Selector
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:
- Eiffel Tower, France
5 Avenue Anatole France, 75007 Paris, France - CN Tower
Ontario M4X 1G7, Canada - Big Ben, London
Palace of Westminster London SW1A OAA, United Kingdom - The Leaning Tower of Pisa
Piazza dei Miracoli, 56100 Pisa PI, Italy - Central Park, NY
870 7th Ave, New York, NY, USA
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 "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:
-
ID of the DIV containing addresses UL
-
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.