I have come across an issue with google maps.
I have an HTML form which displays a large amount of data for a user. The form is split into a concertina layout, with each concertina responsible for showing different aspects of the user’s data.
One of these concertinas holds the user’s address and a google map with several pins representing pertinent information.
If the form is loaded, and the concertina is closed, then google map <div> has no vertical height on which to calculate zoom settings and I end up with a map that is zoomed to the extents of the planet.
If the concertina is open when the form is loaded then zoom works fine (because the map <div> has height).
This is a well known feature/bug. One way to get around this is to load the google map when the user opens the concertina or if the concertina is open when the form is loaded.
What I need to achieve: I need to prevent multiple calls to google maps to ‘reload’ the map if the user opens and closes the concertina multiple times (without refreshing the form).
Here is a fiddle: https://jsfiddle.net/fdnuopzv/4/
As you can see the google map is loaded EVERY time the concertina opens. I need to detect that the map exists so that it shows the existing map rather than going and getting a fresh one.
I tried using:
if (!google.map) {
map_init();
}
but this does not have the desired affect.
As a point of interest if you move the map_init() line from line 10 to line 65 you can see how a zero height breaks the google zoom.