Ajax Load a page with Google map Inside

Ajax Load a page with Google map Inside

Hello everybody, I tried to do a loading bar during the computation of the data of my google map, unfortunately without success for the moment. I use the load function serveral times but never with a google map / javascript, that's probably the problem linked to it. Here is my 2 html pages : 1- dynamicmap.html 2-googlemap.html.

For information, I worked with Django, the googlemap.html works very well when I used this "outside" the dynamicmap.html ... I tried to add the function "initialize()" as argument to load function. I am very lost about how to do. Any remarks is welcom i am still new in webdevelopment, but experimentend in classic programation.

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
      <title>Harmur web</title>
      <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
    </head>
    <body>
    <script src="/site_media/script/autoComplete/jquery.js"></script>


    <script>
    $(document).ready(function(){
       $('#cont').load('/googlemap/?threat_type={{threat_type}}&threat_id={{threat_id}}');
    });
    </script>

    <h2>Heat map for {{threat_type}} - {{threat_id}}</h2>

    <div id="cont">
    <img src="http://www.student.montefiore.ulg.ac.be/~duvivier/wait.gif" />
    </div>

    <center>
      <A HREF="#" onClick="top.close()">Close</A>
    </center>
    </body>
    </html>



























  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
      <title>Harmur web</title>
      <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
    </head>
    <body>


    <script langage="Javascript">
    var ff=null;
    function openPopUp(file) {
    ff=window.open(file,"popup","width=800,height=600,top=20,left=30");
    }
    </script>


    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAfvcYfwcgCPMuGHZbtG34JhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSohzIXx8EKSSdH9DDD7nquTRzadg"
            type="text/javascript"></script>

    <script src="/site_media/script/markerclusterer.js"
        type="text/javascript"></script>
    <script type="text/javascript">

      function initialize() {

      var map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(0, 0), 2);
      map.setUIToDefault();

      // will contain the different marker s
      var markers = [];

      function createMarker(point, infos) {
      var marker = new GMarker(point);
      GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(infos);
      });
      return marker;
      }
      {% for location in tabloc %}
      var point = new GLatLng ({{ location.0 }} , {{location.1 }} )
      // info that will be added to the marker
      var infos = "<div style=overflow:auto;max-height:350px;font-size:12px;>{{location.2|safe}}</div>"
      var marker = createMarker(point, infos);
      markers.push(marker);
      {% endfor %}

      var opt = {gridSize:60, maxZoom: 5};

      var markerCluster = new MarkerClusterer(map, markers, opt);

      }

      //var total = markerCluster.getTotalMarkers;

    </script>
    </head>
      <body onload="initialize()" onunload="GUnload()">
          <div id="map_canvas" style="width: 100%; height: 480px"></div>
      </body>
    </html>



































































Thank you very much for anybody who tried to help my case.

Julien