Search code examples
jquerygoogle-mapsgoogle-maps-api-3jquery-tools

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>

Solution

  • 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 :(