Google Maps refresh problem

[ScottsdaleExpert]

Google seems to be trying to monetize Maps now and has just forced us to change the code we were using to generate our maps on our website: http://www.troonrealestate.com/

I don't know if anyone here can help with this but I guess it can't hurt to ask.

When you go to the home page, the new code loads the map just fine.

Click on the menu MAP link, http://www.troonrealestate.com/troon-map/, and the page loads with just a blank space where the Google Map is supposed to appear. However, if you refresh the page, the map loads just fine.

On the Maps page, there is an iframe that calls a html page:
<iframe width="1100" height="1000" src="https://www.Troonrealestate.com/troon_all.html" frameborder="0" allowfullscreen></iframe>

This troon_all.html page has a script to load the map in the head section.

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=*****************************&callback=initMap">
</script>

Obviously our key replaces the stars above.

The same script above is also included in the Genesis Theme Settings -> header and footer scripts -> header section. I can't get the map to work if it is removed from this header section or if it is removed from the troon_all.html page that is called, so I don't think that is the problem.

I must be missing something somewhere or doing something wrong, but I can find nobody else with the same problem when I google it.

Is there a way to force a refresh in the troon_all.html page? Somewhere else?

Has anyone encountered this sort of problem before and have a solution to it?

Thanks if you can help.

http://www.troonrealestate.com/

[ScottsdaleExpert]

I should add that the iframe code from the Maps page is also used on the home page in the 'Home Top' Custom HTML widget.

<iframe width="1100" height="1000" src="https://www.Troonrealestate.com/troon_all.html" frameborder="0" allowfullscreen></iframe>

This makes the same map show up on both pages.

[Author]

Posts