JavaScript Wait / Google Maps

Tyler_H72 · 06-19-2012, 02:32 PM

I am having some issues with a Google map. I can display the map and add overlays and all that good stuff, but I have no idea how to get my script to wait for the map to load before moving on. The issue I am having is that in order to proceed with my code, I need to be able to call 'map.getBounds()', which doesn't return anything until the map is properly loaded. I can use a timeout for the time being, but that seems like a really shoddy way to go about it, and I have to include most of my page in the timeout function. Any suggestions will be much appreciated.

sag47 · 06-19-2012, 08:08 PM

How about utilizing Events in the API?

Code:

    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapDiv = document.getElementById('map_canvas');
        var map = new google.maps.Map(mapDiv, myOptions);

        // We add a DOM event here to show an alert if the DIV containing the
        // map is clicked. Note that we do this within the intialize function
        // since the document object isn't loaded until after the window.load
        // event.
        google.maps.event.addDomListener(mapDiv, 'click', showAlert);
      }

      function showAlert() {
        window.alert('DIV clicked');
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Where the key part is

Code:

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

From my understanding the initialize function executes when the DOM is ready.

Tyler_H72 · 06-20-2012, 08:52 AM

Thanks for the reply. The problem I have here is that the main script is already running when the window loads (via the jquery .ready() function), and the functionality that I want to use should only run once, right after the map loads. If I add that listener, it will run every time (whatever triggering event I choose) is fired, and if I use load for the triggering event, it doesn't run at all since the load event has already happened before the listener is added.

sag47 · 06-20-2012, 09:20 AM

I'm not sure I understand what you're trying to do. You need to execute something after the map loads for the first time, am I correct? The addDomListener should accomplish that. That function could effectively replace any "onload" functionality you're using with jQuery and use your set up code there.

Perhaps I'm not fully understanding the problem thus far. When you say, "right after the map loads", this sounds like loading the page for the first time. Or are you talking about dragging the map around and need to wait for the tiles to load?

Tyler_H72 · 06-20-2012, 10:02 AM

Sorry- I guess I was a bit unclear there. Basically, I have an init function that executes with the command $(document).ready(function() { ... This creates and loads the map as soon as the document has loaded. What I am trying to do is to allow a second script to run when the map has loaded. Essentially, this second script polls a database for location data, then plots a series of points on the map. The problem is that as I do this, I want the map to adjust its borders. I am doing this by creating a LatLngBounds object and using the extend() method to make sure that it encompasses all of the points that I am marking on the map. The problem arises shortly after this, when I attempt to adjust various other objects on the map. In order to center the other items being marked on the map, I use the map.getBounds().getCenter() call to find the appropriate location. The problem is that the map has not fully loaded yet, so the call to getBounds() is undefined.

sag47 · 06-20-2012, 10:47 AM

Ah I see now, I assume you're using Ajax. jQuery has a method for executing arbitrary code after a request is complete.

http://api.jquery.com/ajaxComplete/

Though, I'm not sure if that works correctly with Google Map loading as I've never worked with it and Google's stuff is always complicated in unexpected ways. I would guess not since google probably uses a lot of Ajax which executes after your query successfully downloads the map script. I think this might be better accomplished in jQuery than with the maps API though if there is a solution.