Google Maps in jQuery Accordion works in jsFiddle, but maps do not load on my server until window MANUALLY resized

Question

I am trying to simply make an expanding list of Google Maps which allow you to locate an item. Here I have a static HTML page where you can click records and they will expand to show you a Google Map. The map, however, only comes through as grey until you resize the page.

Here is the page with the problem (the extension says php, but it doesn't actually have any): https://yt074.addons.la/tmp/track/list.php

I'm already calling google.maps.event.trigger(maps[i], 'resize'); within the code (as you can see by viewing source), and I have tried jQuery(window).trigger('resize');, window.dispatchEvent(new Event('resize')); and a few others to simulate a resizing of the window, but to no avail.

Here is a jsFiddle with the code from above literally copy/pasted into the fiddle and it works: https://jsfiddle.net/myingling/Lkdmp1zo/

Or here is a shorter version on my server which is not working: https://yt074.addons.la/tmp/track/fiddle.php

What am I missing on my server? Server is ubuntu running nginx on an AWS EC2 cluster, but once the code is client-side I don't understand why that would matter (but better safe to explain).

@geocodezip I believe so. It's exactly the same code in both places (on my server and in the jsFiddle, and the fiddle (which works) is based upon the "centering" problem you educated me about yesterday. — Bing, May 31 '17 at 19:57
@geocodezip Yes, but when I remove it (just did, revisit to see) it doesn't change the behavior. And when I add it to the fiddle it doesn't break anything there: https://jsfiddle.net/myingling/Lkdmp1zo/3/ So I assumed it was a non-factor... am I wrong? — Bing, May 31 '17 at 21:37
I would suggest creating a [mcve] that reproduces the issue. Something is different about your website. — geocodezip, May 31 '17 at 23:15
Like this? It's basically just a copy/paste from the working fiddle you provided, but hosted on my server: https://yt074.addons.la/tmp/track/fiddle.php — Bing, Jun 01 '17 at 00:43
See if there is a solution here: https://stackoverflow.com/questions/19003291/embed-google-map-is-wrong-displayed-until-resizing-webpage perhaps along the lines of `google.maps.event.trigger(map, 'resize');` — ESR, Jun 05 '17 at 04:23
@EdmundReed That line of code is line 81 of the link I provided above: https://yt074.addons.la/tmp/track/fiddle.php — Bing, Jun 05 '17 at 04:25

fubar · Accepted Answer · 2017-06-05T04:45:40.430

1

The problem is that your .map elements are hidden when Google Maps is initialised. You can test this by setting the first accordion panel to being open by default, and then the map renders.

To fix the problem, you need to trigger a resize event when the accordion panel is opened. The following revised version of your code does that. I've tested this with the example hosted on your server and it works.

(function ($) {
    var maps = [];

    var $accordion = $('#accordion').accordion({
        active: false,
        collapsible: true
    });

    $accordion.on('accordionactivate', function(event, ui) {
        var map = ui.newPanel.find('.map').data('map');
        google.maps.event.trigger(map, 'resize');
        map.setCenter(map._center);
    });

    $accordion.find('.map').each(function(i, o) {
        var latLong = new google.maps.LatLng($(o).data('lat'), $(o).data('long'));

        var map = new google.maps.Map(o, {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROAD,
            center: latLong
        });

        maps.push(map);

        var marker = new google.maps.Marker({
            position: latLong,
            map: map,
            title: $(o).data('time')
        });

        map.setCenter(latLong);
        map._center = latLong;

        $(o).data('map', map);
    });

})(jQuery)

edited Jun 05 '17 at 04:45

answered Jun 05 '17 at 04:34

fubar

16,918
4
37
43

This seems to be (mostly) working, but the maps aren't centering now: https://yt074.addons.la/tmp/track/fubar.php – Bing Jun 05 '17 at 04:40
Made that edit to `fubar.php` and still not loading centered... No errors in the JS console. – Bing Jun 05 '17 at 04:44
That makes a lot of sense, if the map is still height 0, then centering it will obviously put it at 0,0 as well. It works now, thank you so much! I cannot award the bounty for 24 hours; if I still haven't given it to you after then feel free to remind me! – Bing Jun 05 '17 at 04:52
Turns out there is one more bug: if you click to open one map, then click it to close it, then click it to open it again, it will not open again. On the click-to-close I get `Cannot read property '__e_' of undefined` in the JS Console. Can reproduce here: https://yt074.addons.la/tmp/track/fubar.php – Bing Jun 05 '17 at 18:48
Nevermind, figured it out myself: just wrap the accordionactive trigger's changes to the `map` with a check for undefined, like so: https://yt074.addons.la/tmp/track/test.php – Bing Jun 05 '17 at 18:50

Google Maps in jQuery Accordion works in jsFiddle, but maps do not load on my server until window MANUALLY resized

1 Answers1