CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3jquery-tools
Efe
Efe

Reputation: 954

Executing javascript in loaded page

My users recently told me that default page loads much slower than before. I think its because Maps is loaded immediately as the page loads. Is there a way to delay it until the click here button clicked?

Based on the suggestions I received from the answers so far, I decided to call the map from an external URL. But Javascript on loaded page is not executed. Hoe can I fix this?

Thanks!

This is how I call the external page.

$(function() {

    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $("a[rel]").overlay({

        mask: 'darkred',
        effect: 'apple',

        onBeforeLoad: function() {

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");

            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }

    });
});
<!-- external page is given in the href attribute (as it should be) -->
<a href="default.cs.asp?Process=ViewCheckinMap" rel="#overlay" style="text-decoration:none">
  <!-- remember that you can use any element inside the trigger -->
  <button type="button">Show external page in overlay</button>
</a>

This is what is not executed.

<script>
      function initialize() {
        var data = <%=Data%>;
        var center = new google.maps.LatLng(48.404840395764175, 2.6845264434814453);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < data.users.length; i++) {
          var location = data.users[i];
          var latLng = new google.maps.LatLng(location.latitude,
              location.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'click', initialize);
</script>

Upvotes: 0

Views: 322

Answers (2)

Bastian Rang
Bastian Rang

Reputation: 2187

regarding your changed question:

remove google.maps.event.addDomListener(window, 'click', initialize);

change wrap.load(this.getTrigger().attr("href")); to:

wrap.load(this.getTrigger().attr("href"), function(){initialize();});

this should initialize your map, right after loading the external javascript.

not tested :(

Upvotes: 2

agriboz
agriboz

Reputation: 4854

That means you an need external page loaded with ajax.

To do that make a new html page. And name it map.html. in map.html page just put your google map code.

for your default page <a href="map.htm" rel="#overlay">Click here to open the map</a>.

After that your map will be loaded in .contentWrap div that using ajax method.

<!-- overlayed element -->
 <div class="apple_overlay" id="overlay">
  <!-- the external content is loaded inside this tag (map.html) -->
  <div class="contentWrap"></div>
 </div>

Css for the .contentWrap

/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height: 400px; // it is the same height of the #map div
overflow-y:auto;
}

Upvotes: 1

Related Questions