Home/ Questions/Q 6693561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:59:50+00:00

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

  • 0

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>

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

Please suggest!! would appreciate if can get code sample for above problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I thought below approach.

    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.

    7.

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

    1. 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”);
      }
      });

    Please suggest whether is it right approach or I need to do some modifications!!

    • 0