• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 503
  • Last Modified:

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.
0
tia_kamakshi
Asked:
tia_kamakshi
  • 3
  • 2
1 Solution
 
MrunalCommented:
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.
0
 
tia_kamakshiAuthor Commented:
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
0
 
MrunalCommented:
try this:

1.
<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>


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

$jq("#GoogleMapContainer").dialog({
        modal: true,
        width: 750,        
        title: 'Google Map',
        resizable: false,        
        open: function(type, data) {
            $jq(this).parent().appendTo("form");
        }
    });


check whether popup is coming and what you want.
0
 
tia_kamakshiAuthor Commented:
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


0
 
tia_kamakshiAuthor Commented:
solution was not according, which was actually required.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now