How to load google map using jQuery on the anchor click

Posted on 2011-10-13
Last Modified: 2012-05-12
Hi Experts,

I am trying to load google map on the anchor click. Below are the details.

I have index.aspx page where I have got one anchor tag and a div divLoadMap

    <a class="loadMap" href="map.aspx">Load Map</a>
    <div id="divLoadMap">

And I have map.aspx which have maps details. Below is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="" lang="_LANGUAGE" xml:lang="_LANGUAGE">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Simple Jquery CSS Tabs and V3 Google Maps</title>
         <script type="text/javascript" src="/common/js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" language="javascript">
        $(document).ready(function() {
          function initialize() 
                var latlng = new google.maps.LatLng(25.294371, 55.332642);     
                var myOptions = {       zoom: 8,       center: latlng,       mapTypeId: google.maps.MapTypeId.ROADMAP     };     
                var map = new google.maps.Map(document.getElementById("map_canvas"),         myOptions);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: 'Dubai'
                var contentString = 'Dubai';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString,
                    maxWidth: 50
                google.maps.event.addListener(marker, 'click', function() {
       <form id="mapform" >
       <div id="map_canvas" style="width: 500px; height: 500px">

Open in new window

Now I want load this map on the click of anchor tag which is present on index.aspx.

I think on the click of anchor the map will be loaded on the divLoadMap and then appear as overlay window.

Please suggest!! would appreciate if can get code sample for above problem.
Question by:tia_kamakshi
    LVL 22

    Expert Comment

    Hi try these steps:

    1. Declare a div with id = 'GoogleMapContainer'
    2. Make it by default display: none.
    3. inside this div, declare iframe and assign src property of this iframe to index.aspx page.
    4. Now onclick of anchor tag call a javascript function, which internally will call query modal dialog for above declared div.
    5. this will result into a popup window which contain google map.

    hope you are cleared, what i mean.

    Author Comment

    Hi mroonal,

    Can you please give me working code example, which you are trying to say as this is first time i am going to implement.

    LVL 22

    Accepted Solution

    try this:

    <div id="GoogleMapContainer" title="Google Map Container" style="display: none;">
            <iframe id="frameGoogleMapContainer" height="100%" width="100%" src="index.aspx"
                frameborder="0" scrolling="auto"></iframe>

    2. Call javascript function on click of anchor tag. and in that javascript function write this code:

            modal: true,
            width: 750,        
            title: 'Google Map',
            resizable: false,        
            open: function(type, data) {

    check whether popup is coming and what you want.

    Author Comment

    In the below code provided by you what is "index.aspx" is this is the google map page aspx.

    <div id="GoogleMapContainer" title="Google Map Container" style="display: none;">
            <iframe id="frameGoogleMapContainer" height="100%" width="100%" src="index.aspx"
                frameborder="0" scrolling="auto"></iframe>

    Open in new window


    Author Closing Comment

    solution was not according, which was actually required.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    network + 7 57
    Dynamically changing javascript code 2 27
    Issues with signature 19 19
    Search box won't work. 22 15
    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
    Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    730 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

    15 Experts available now in Live!

    Get 1:1 Help Now