Question

I’m having this problem: I have two Google maps in one page, showing just one a time. One shows a user-selected preferred store. If the user wants to choose another one, a WebService provides the nearest ones, and with that info, I hide the first map (and some associated elements), create another map and show it.

Here is the fiddle:

http://jsfiddle.net/Osoascam/ReSsM/2/

I have several questions:

1. Calling the Google Maps API directly (not via google.load), is there a way to determine when the script has loaded completely so I don’t run into the “google is not defined” error?

2. Is it OK what I’m doing to have two maps? Passing references to var currentMapId, searchMapId? As I’m sending a reference, I thought it might work… It’s working, but I think it’s kind of stupid. I don’t know if just having one reference is OK.

3. Try to click the buttons fast over and over again, the map shifts and a large gray area appears. This is not a big deal on the fiddle, but it is on my application, as sometimes it stays that way forever, even if the user drags the map. This is actually my most important question, the other two are just about code organization and optimization. How can I fix it?

4. Finally, I don’t know if it’s my impression, but it seems to load the maps extremely slowly when you drag it around.

Note: Actually my second map never loads, but the application is so big, I’m still testing the reason. For some weird reason, the map starts loading whenever I resize the browser.

Thanks in advance,

Óscar

Answer 1

I had the same problem as you, my layout is really complex, and I also have multiples gmaps on a page. What I did in order to fix this problem was changing the z-index

I wrapped one of the maps on a container like this one:

<div style="height:0px;overflow:hidden;z-index:-999;">
<div id="map" style="width: 520px; height: 400px"></div>
</div>

that fixed the problem, but I really don’t know why. I hope it helps!
Good luck