asked on

How to load google map using jQuery on the anchor click

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">
</div>

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE" xml:lang="_LANGUAGE">
    <head>
        <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="http://maps.google.com/maps/api/js?sensor=false"></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() {
                  infowindow.open(map,marker);
                });
                
            }  
          
         initialize(); 
    
        });
       
        </script>
    
    </head>
    <body>
       <form id="mapform" >
       <div id="map_canvas" style="width: 500px; height: 500px">
       </div>
       </form> 
    </body>
    </html>

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.

Mrunal

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.

tia_kamakshi

ASKER

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.

Thanks

ASKER CERTIFIED SOLUTION

Mrunal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tia_kamakshi

ASKER

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>
</div>

Open in new window

tia_kamakshi

ASKER

solution was not according, which was actually required.