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.