embeded custom google map wont display without refresh

Question

I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike Here is the code for the section that displays the maps:

BackMoody Plumbing

<article data-role="content">

  <h2>Moody Plumbing Service Area</h2>
  <ul data-role="listview" data-inset="true" data-filter="false">

  <li>
    <h3>Warren Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>

    <li>
    <h3>Youngstown Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>

    </ul>
</article>

<nav data-role="footer">&copy; <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing <a href="http://moodyplumbingmpi.com/mobile.php" data-role="button" data-icon="star" data-theme="a">Visit Full Site</a>
</nav>

The URL is not working. Are you sure you don't have a local DNS which makes it resolve just for you? — thebreiflabb, Mar 31 '15 at 00:47
What does your code look like? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue (in the question itself). — geocodezip, Mar 31 '15 at 01:06
No kidding it didn't resolve! I typed the wrong URL. Here is the correct URL http://www.moodyplumbingmpi.com/ It redirects to mobile.moodyplumbingmpi.com and serves up a mobile index file. I posted the file above. — MikeS, Mar 31 '15 at 02:01

cybermike · Accepted Answer · 2015-03-31T21:23:02.673

So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.

I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:

<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...

Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery

<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
    $('#location1').attr('src', function(i, val) { return val; });
    $('#location2').attr('src', function(i, val) { return val; });
});
</script>

The reload is a bit jumpy. So other possible options to consider include:

dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing

You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).

Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.

Thanks cybermike! I understand the concepts your describe. I am a javascript rookie and can hack through some code. I don't know how to write the code to do what you describe. First step I can handle, adding the divs like this: — MikeS, Mar 31 '15 at 11:48
Writing the code to make the map refire or redraw at the tap of the "Service Areas" button I am not skilled enough to write yet. Any suggestions on that? Thanks! — MikeS, Mar 31 '15 at 11:50
See my revisions above to the answer. And be sure to read the new last paragraph. — cybermike, Mar 31 '15 at 21:23
Thanks cybermike! I used the code and suggestions on id's for the iframes and it works! It is a bit jumpy after loading but it does work. I created the maps using my maps, so I believe that is good for longer than this year. I did read the thread google maps not displayed... The scripting is above my knowledge. It looks like I need to get to work and learn it. My go to source is lynda.com for things like that. It is the resource I used to learn HMTL and CSS. Thanks again for all the help! Mike — MikeS, Mar 31 '15 at 23:45

embeded custom google map wont display without refresh

1 Answers1

Warren Service Areas