Can we find out whether a Google map has been initialized?

Question

Say we've initialize a map with some code:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas-0"),
        mapOptions);
}

Is there an easy way to determine whether a particular map on the page has been initialized (in this case, the map located at id="map-canvas-0")?

I can think of some ways using hidden fields, but I was hoping there was a simpler way.

Thanks for the response. I'm not really concerned with doing anything immediately after the map has loaded, but say the user tries to do something 30 seconds after the map has been loaded...I just want to say, "Hey, has that map loaded yet?" — Brent Barbata, May 22 '13 at 19:55
Well, that looks exactly what you could do with the "idle" event: save some boolean value that indicates the map has been loaded. — Jalayn, May 22 '13 at 20:00
I had thought about that. For example, create a hidden field where id="hidden-map-canvas-0" and then set the value to true if it loads correctly. I was just wondering if thee was an easier solution. — Brent Barbata, May 22 '13 at 20:04
Why would you need a hidden field? Just use a JavaScript variable. — Michael Geary, May 22 '13 at 22:43
I have 200+ maps on a page (not all visible, I'm not that mean to the users) so I suppose I could store all the loaded maps in a javascript array, but instead of looping through an array, I feel like it would be easier to just create a hidden field under each map canvas (since I'm creating all of them dynamically anyway). — Brent Barbata, May 23 '13 at 08:39

Michael Geary · Accepted Answer · 2013-05-24T06:31:24.253

I think the real question here is "On your page, what does it mean for a map to be initialized or not?"

In a comment you mentioned that you may have about 200 maps on the page. Surely you don't mean that you've called new google.maps.Map() for each of those 200 maps? That would seem to make for a very slow loading page.

Is it actually that you have 200 container <div> elements, some of which may have been initialized with a map using new google.maps.Map() as in your initialize() function, and some of which have not yet been initialized with that code but are simply empty <div> elements until you do that?

And could it be that what you're really interested in is not so much whether a particular map has fully loaded, but simply whether you've started loading it?

As an example, you could have a page where you click on a box and it starts loading a map. Once the map has started loading, you don't want to reload it on a second click. What you're interested in this case is not whether the map has fully loaded, but whether it has started loading at all.

If that's what you're doing, then one simple way to test it is to see if the <div> element has any child elements or not:

function hasMap( id ) {
    return !! document.getElementById(id).firstChild;
}

if( hasMap("map-canvas-0") ) {
    // That map has loaded or at least has started loading
}

If you need to find out if a map is fully loaded, then the idle event is the way to do it. At that point it's really a tossup whether to use a hidden field or a JavaScript object. A JavaScript object is really simple:

var mapsLoaded = {};

function loadMap( id, lat, lng, zoom ) {
    var options = {
        center: new google.maps.LatLng( lat, lng ),
        zoom: zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var container = document.getElementById( id );
    var map = new google.maps.Map( container, options );
    google.maps.event.addListener( map, 'idle' function() {
        mapsLoaded[id] = true;
    });
}

Now, if you want to know if a map of a particular ID is loaded, simply use:

mapsLoaded[id]

e.g.

mapsLoaded['map-canvas-0']

will tell you if the map from your example is fully loaded.

If this answer seems way off base, how about explaining more fully what you're doing? When do you create your container elements—all when the page is initialized, or later? When and how does a map get created? On a user click or what? How do the container IDs get generated? What is the situation where you need to know whether a map has been created—when do you need to know this and why?

The more you can clearly specify these kinds of questions, the more likely it will be that someone can help you with a specific answer—and the more likely that you'll have an "aha" moment and figure out exactly what to do. :-)

Awesome answer. Not only for my particular problem, but I feel like something that would be helpful for many people who run into a similar problem. Thanks! — Brent Barbata, May 29 '13 at 21:16

score 2 · Answer 2 · answered May 24 '13 at 05:45

2

check whether your map variable is undefined or not...

By

typeof(map);

answered May 24 '13 at 05:45

Premshankar Tiwari

3,006
3
24
30

score 1 · Answer 3 · answered May 22 '13 at 23:00

1

Create a global boolean variable and set it to false. At the end of the map initialization function, change its value to true.

answered May 22 '13 at 23:00

csterling

704
3
7
18

Thanks for the suggestion, but something similar has been proposed (whether it's with html hidden fields or a js variable/array) and I feel like it's more of a hack. I guess though, if it's the only way, then it's the only way:) – Brent Barbata May 23 '13 at 08:46
1

I disagree, I don't think it's a hack. To me it is a logical step. I'm not sure why you need to know if a map is loaded or not, but you can refer back to that variable at any other point in your code and get a true/false value. If the user tries to do something 30 seconds after the map has been loaded you just put an if statement to check the value of the variable. – csterling May 23 '13 at 14:17

Can we find out whether a Google map has been initialized?

3 Answers3