Google Maps link navigating on website

Hi Experts!

I have an interesting problem that I am hoping one of you will be able to solve for me. I am using "Google Maps" and have created a "My Map" and placed markers on certain city's. I am embedding the map on a website by using the iFrame option provided by Google. I also have those same city's that are marked on the map as plain text on the page.

What I would like to happen is when you click on the city that is a hyperlink it takes you into a zoomed up view of that on the embedded iframe map that is on the page.

Does anyone know how I can do this?

Thanks in advance.

Kind Regards,
CompTeck2255
CompTeck2255Asked:
Who is Participating?
 
lunadlConnect With a Mentor Commented:
You can pass the zoom parameter to the iframe and switch the querystring parameters in the iframe link. If it is a small list of cities this would work best with static links with the zoomlevels(http://mapki.com/wiki/Google_Map_Parameters). If it needs to be dynamic you will need to use the google map api. It is simple enough to use given their documentation(http://code.google.com/apis/maps/).
0
 
HainKurtSr. System AnalystCommented:
you should use google api for these kind of things...

start reading from here ;)

http://code.google.com/apis/maps/
0
 
CompTeck2255Author Commented:
Hi Lunadl

I like the idea of what you have described. They are just static links. Could you please give an example of how I would go about passing the zoom to the iFrame.
0
 
lunadlConnect With a Mentor Commented:
Here is an example of the iframe solution i was talking about
<script>
var zoomLevel = 10;

function setCity(city)
{
var newLoc = "http://maps.google.com/maps?q=" + city + "&z=" + zoomLevel + "&output=embed";
document.getElementById("cityFrame").src = newLoc;
}

</script>


<a href="#" onClick="javascript:setCity(this.id);" id="Seattle">Seattle</a>
<br />
<a href="#" onClick="javascript:setCity(this.id);" id="Detroit">Detroit</a>
<br />
<a href="#" onClick="javascript:setCity(this.id);" id="Austin">Austin</a>


<br />
<br />
<iframe id="cityFrame" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=seattle&z=10&output=embed"></iframe>

Open in new window

0
 
CompTeck2255Author Commented:
Hi Lunadl,

Excellent - Does exactly what I want. Thanks for the support.

Kind Regards,
CompTeck2255.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.