CODEWITHSUNDEEP
jquery-uigoogle-maps-api-3jquery-ui-tabsinteraction
Christos Hayward
Christos Hayward

Reputation: 5993

Why is my Google Map in a jQuery UI tab only displaying one tile at the top left corner of the screen?

I have two Google Map API v3 Maps in jQuery tabs. They both display the first time they appear in their tabs, but the initially deselected tab only displays a tile or so at the top left-hand corner.

Calling google.maps.event.trigger(all_map, 'resize') periodically does not change this.

In my code I have:

            <div id='all_map_canvas'>
            </div>
            <script>
                function show_all_map()
                    {
                    var center = new google.maps.LatLng(%(center_latitude)s - .15, %(center_longitude)s + .2);
                    var myoptions = {
                        zoom: %(zoom)s,
                        center: center,
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                        };
                    all_map = new google.maps.Map(document.getElementById('all_map_canvas'), myoptions);
                    all_map.setZoom(%(zoom)s);
                    jQuery('#all_map_canvas').show();
                    google.maps.event.trigger(all_map, 'resize');
                    }
                function show_all_map_markers()
                    {
                    %(all_map_markers)s
                    }
                var markers = [];
                jQuery('#all_map_canvas').width(jQuery(window).width() -    300);
                jQuery('#all_map_canvas').height(jQuery(window).height() -  125);

How can I make both maps display in full after tab swaps?

Upvotes: 2

Views: 2823

Answers (2)

Plamen
Plamen

Reputation: 360

I had the same problem: Google map in div that has style display:none;.
Solved it with this two steps:

  1. Removing all additional styling of the div I'm placing the map except height:100%;

  2. Initiate the map after the holding div is displayed not when the it is created. In my case in the callback function of the show method:

    CSS

    .main-window #map{
    height:100%;
}

    JS

    $('.main-window').show(3000, function() {
    // create the map after the div is displayed
    var mapOptions = {
        center: new google.maps.LatLng(42.499591, 27.474961),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
});

    HTML

    <div class="main-window">
    <div id="map"></div>
</div>

Initiating it in events like jQuery's '$(document).ready(...' or Google's 'google.maps.event.addDomListener(window, "load", ...' is not working for some reason.

Hope it helps.

Upvotes: 4

Pierluc SS
Pierluc SS

Reputation: 3176

I am using gmaps.js which is a simplified api for google map. But it's simply a matter of attaching a tabsshow event in javascript and refreshing the map in the delegate's function.

Here's the code I use for gmaps.js

$('#tabs').bind('tabsshow', function(event, ui) {
    event.preventDefault();
    if (ui.panel.id == "tabs2") {
            //gmaps.js method
            map.refresh();
            map.setCenter(lastLoc.lat(), lastLoc.lng()); 

            //for native google.maps api
            google.maps.event.trigger(map, 'resize');
            map.panTo(new google.maps.LatLng(lastLoc.lat(), lastLoc.lng()));            
    }
});

Upvotes: 0

Related Questions