8

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?

2
  • Did any of the answers help you? If yes, please mark the answer correct by clicking on the checkmark to the left of the answer.
    – Anna_MediaGirl
    Dec 22, 2012 at 6:25
  • 1
    Justin and I need to come back and tidy this one up. We 99% got things sorted over email. Will sort in the next few days Dec 22, 2012 at 10:21

4 Answers 4

8

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.

1
  • Justin, should setZoom be setCenter? Either way I cannot get this to work. map.setCenter(options.center); returns 'options is not defined'. Been trying to get this solved for several weeks. Jan 16, 2013 at 20:10
4

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.

3
  • MediaGirl » I couldn't get that to work unfortunately. Dec 5, 2012 at 9:30
  • That post outlines the same problem, but I will provide the EE specific fix. Dec 5, 2012 at 13:38
  • If the redrawing code doesn't work that Justin posted, comment back here and I'll take a look at your CSS.
    – Anna_MediaGirl
    Dec 5, 2012 at 14:50
1

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

7
  • I think the precedence on SE would be to edit your original post. SE isn't a threaded conversation outside of the comments here. I will edit my original answer to do what you want vs center on the default (0,0). Dec 6, 2012 at 2:00
  • @JustinKimbrell - Thank you. Not sure if I'm missing something... Have you updated your example? Thanks for all your help. Dec 6, 2012 at 23:03
  • Not yet, haven't had the time to do so just yet. I get back with you tomorrow when I get a chance. Dec 7, 2012 at 5:06
  • @JustinKimbrell No worries, thank you :) Thought I had missed something obvious. Dec 7, 2012 at 5:28
  • I just updated your code. If that doesn't work lets continue debugging using my support channel and I will update this thread with the final code. Dec 7, 2012 at 13:38
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.