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?

  • 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 '12 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 – Mike Dexter Dec 22 '12 at 10:21
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.

| improve this answer | |
  • 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. – Dan Johnson Jan 16 '13 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.

| improve this answer | |
  • MediaGirl » I couldn't get that to work unfortunately. – Mike Dexter Dec 5 '12 at 9:30
  • That post outlines the same problem, but I will provide the EE specific fix. – Justin Kimbrell Dec 5 '12 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 '12 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

| improve this answer | |
  • 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). – Justin Kimbrell Dec 6 '12 at 2:00
  • @JustinKimbrell - Thank you. Not sure if I'm missing something... Have you updated your example? Thanks for all your help. – Mike Dexter Dec 6 '12 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. – Justin Kimbrell Dec 7 '12 at 5:06
  • @JustinKimbrell No worries, thank you :) Thought I had missed something obvious. – Mike Dexter Dec 7 '12 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. – Justin Kimbrell Dec 7 '12 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
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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