Google Maps link navigating on website

Posted on 2009-12-16
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
    LVL 12

    Accepted Solution

    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( If it needs to be dynamic you will need to use the google map api. It is simple enough to use given their documentation(
    LVL 51

    Expert Comment

    you should use google api for these kind of things...

    start reading from here ;)

    Author Comment

    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

    Here is an example of the iframe solution i was talking about
    var zoomLevel = 10;
    function setCity(city)
    var newLoc = "" + city + "&z=" + zoomLevel + "&output=embed";
    document.getElementById("cityFrame").src = newLoc;
    <a href="#" onClick="javascript:setCity(;" id="Seattle">Seattle</a>
    <br />
    <a href="#" onClick="javascript:setCity(;" id="Detroit">Detroit</a>
    <br />
    <a href="#" onClick="javascript:setCity(;" id="Austin">Austin</a>
    <br />
    <br />
    <iframe id="cityFrame" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=""></iframe>

    Open in new window


    Author Closing Comment

    Hi Lunadl,

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

    Kind Regards,

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Suggested Solutions

    Title # Comments Views Activity
    send the results of a batch file or process via email 9 57
    Magento Indexing 1 49
    php survey script 4 49
    exchange, scripts 3 34
    Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
    The task of choosing a web design company to build a website for your business should never be taken in a light manner. Provided the fact that your website will act as a representative to your business and will be responsible for imposing an online …
    Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    760 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

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now