Hiding/Showing Google Maps for ExpressionEngine

Question

Using Objective HTMLs "Google Maps for ExpressionEngine" we can get the 3 maps from this query to show:

{exp:channel:entries channel="events" orderby="events_start_date" sort="desc"}
    {if count == 1}
    {exp:gmap:init id="map{entry_id}" class="google-maps" style="width:100%;height:380px" scrollwheel="false"} 
    {exp:gmap:marker id="map{entry_id}" latitude="{events_map_latitude_field}" longitude="{events_map_longitude_field}" zoom="16"}
    {if:else}
    {exp:gmap:init id="map{entry_id}" class="google-maps" style="width:100%;height:380px" scrollwheel="false" script_tag="false"}
    {exp:gmap:marker id="map{entry_id}" latitude="{events_map_latitude_field}" longitude="{events_map_longitude_field}" zoom="16"}
    {/if} 
{/exp:channel:entries}

The maps are in a div that uses jquery show/hide and the maps only show the first tile and the map is not centred correctly. If the show/hide is disabled the maps render correctly.

Is there a way to overcome this issue with maps and jquery?

Answer 1

There are a lot of ways to solve this problem, so the best one will be the one that works best with your code. Below is a basic example of how to redraw the map when a trigger is clicked. Essentially, when a tab or an accordion is clicked, the map goes from hidden to visible. If the map was hidden before it was totally initialized, it will not get rendered correctly - which is why it needs to be redrawn.

$(document).ready(function() {

    // Trigger represents any selector you want to trigger the map to be redrawn

    $('.trigger').click(function() {

        var $t     = $(this);
        var id     = $t.data('id');
        var map    = window[id+'_map']; 
        var center = window[id+'_options'].center;
        var bounds = window[id+'_bounds'];
        var delay  = 500;

        /* Allows the animation to start before the map is redrawn, 
           the 500(ms) can be adjusted for optimal performance. 
           If no animation is present, use 0 or remove the delay 
           entirely. */

        setTimeout(function() {
            google.maps.event.trigger(map, 'resize');

            for(var x = 0;x < markers.length;x++) {
                bounds.extend(markers[x].getPosition());
            }

            // This will center the map on the calculated bounds
            map.fitBounds(bounds);
            map.setZoom(options.zoom);

            /* Do not use setCenter and fitBounds, use only the one that works best for you */

        }, delay);

        return true;
    });

});

<!-- Use the data-id property to map the specific map ID -->

<a href="#" class="trigger" data-id="map">Redraw Map</a>

One thing to note is the center variable. This script uses the map's default. Some people prefer to redraw the map according to the auto-calculated bounds (to fit all the maps in the same view) - if that is the case, use the bounds variable.

Answer 2

Your issue is answered here I believe: https://stackoverflow.com/a/3066751/135935

I recently fixed the same problem by changing my CSS to use the off-left positioning suggested in the answer. Worked perfectly.

Answer 3

Thanks Justin for this example.

I have placed that JS at the bottom of my page and updated my gmap code to:

{if count == 1}
    {exp:gmap:init id="map{entry_id}" class="google-maps" style="width:100%;height:380px" scrollwheel="false"} 
    {exp:gmap:marker id="map{entry_id}" latitude="{events_map_latitude_field}" longitude="{events_map_longitude_field}" zoom="16" extend_bounds="false" center="{events_map_formatted_address}"}
{if:else}
    {exp:gmap:init id="map{entry_id}" class="google-maps" style="width:100%;height:380px" scrollwheel="false" script_tag="false"}
    {exp:gmap:marker id="map{entry_id}" latitude="{events_map_latitude_field}" longitude="{events_map_longitude_field}" zoom="16" extend_bounds="false" center="{events_map_formatted_address}"}
{/if} 

As you suspected it centers on the middle of the ocean. Obviously I haven't told the map enough about centering - can you see where I've gone wrong?

Thanks

Answer 4

Can't beat the answer from Justin but I had a similar issue with MX Google Maps. Its definitely all about redrawing the map.

Why is MX Google Map not resizing in tab?

This was the javascript I used to refire/redraw the map.

$('a[data-toggle="tab"]').on('shown', function (e) { 
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() ); 
});  // refire the map