CODEWITHSUNDEEP
javascriptgoogle-mapsmaps
Joey
Joey

Reputation: 1676

Google Maps not rendering correctly within jquery tabs plugin

I'm working on a updating a realtor's website and would like to add a Google Map to the object page. The map will be shown within a tabbed container. For the tabs I'm using IDTabs, a small jQuery plugin.

The map renders, however it seems that the positioning of the map itself is off. The UI renders full width, but the map itself doesnt. Upon moving the map, it also doesn't move across the width of the container. When the window is resized, it reinitializes and then the map does cover the full width of the Maps UI container.

You can check it out here: http://symvo.li/harbourtown/rental.php?id=1 (click on map)

The code:

var map;
function initialize() {
    geocoder = new google.maps.Geocoder();

                    var mapOptions = {
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                    geocoder.geocode( { 'address': 'Kaya Sa 1, Bonaire'}, function(results, status) {
                        if(status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location
                            });
                        }
                    });

                }
                google.maps.event.addDomListener(window, 'load', initialize);

How can i make sure that the map renders correctly?

Upvotes: 0

Views: 1889

Answers (1)

Joey
Joey

Reputation: 1676

I solved the problem with the help of this post: Why doesn't my map render in a jQuery tab?

Because the map renders in a hidden tab, the size of the map doesn't get set correctly. In order to fix this i called a resize event on clicking the tab.

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

Upvotes: 1

Related Questions