[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Google Maps link navigating on website

Posted on 2009-12-16
Medium Priority
Last Modified: 2012-05-08
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,
Question by:CompTeck2255
  • 2
  • 2
LVL 12

Accepted Solution

lunadl earned 2000 total points
ID: 26066865
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/).
LVL 61

Expert Comment

ID: 26066874
you should use google api for these kind of things...

start reading from here ;)


Author Comment

ID: 26068480
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.
LVL 12

Assisted Solution

lunadl earned 2000 total points
ID: 26068993
Here is an example of the iframe solution i was talking about
var zoomLevel = 10;

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


<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


Author Closing Comment

ID: 31666662
Hi Lunadl,

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

Kind Regards,

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month19 days, 10 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question