0

I have a tab which is meant to display a google map, however its not displaying the full map, i have done some googling and still unable to solve it. I beleive it has something to do with the fact it is in a jquery tab. How do i fix this?

This is what the html looks like including the surrounding divs;

                <div id="details" class="det_tab1">
                            <ul class="head">
                                <li><a href="#" class="det_tab1">Property details</a></li>
                                <li><a href="#" class="det_tab2">Map view</a></li>
                                <li><a href="#" class="det_tab3">Street view</a></li>
                            </ul>
                            <div class="det_tab2">
                                <div id="map_canvas"></div>
                            </div>

And here is the javascript

 <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom:8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = document.getElementById("map_canvas");
            map = new google.maps.Map(map, mapOptions);
            var center = map.get_center();
            google.maps.event.trigger(map, 'resize');
            map.set_center(center);
        }
    </script>

And the jquery;

 $('#details .head a').click(function () {
                if ($(this).attr('class') != $('#details').attr('class')) {
                    $('#details').attr('class', $(this).attr('class'));
                }
                return false;
            });
pmillio
  • 1,089
  • 2
  • 13
  • 20
  • "It's not displaying the full map" - what is it displaying? Are you getting console errors? – Cianan Sims Mar 08 '13 at 20:07
  • Have u called the initialize method if its displaying nothing, what is the error – MZH Mar 08 '13 at 20:12
  • Try initializing the map only when the correct tab has been shown. Which tab plugin are you using? – Maktouch Mar 08 '13 at 20:26
  • possible duplicate of [Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap](http://stackoverflow.com/questions/10197128/google-maps-api-v3-not-rendering-competely-on-tabbed-page-using-twitters-bootst) – geocodezip Mar 08 '13 at 20:57
  • also possibly an answer here:[Problems with Google Maps API v3 + jQuery UI Tabs](http://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs?rq=1) – geocodezip Mar 08 '13 at 20:58

1 Answers1

0

For those that still trying to fix this problem triggering resize immediatly not working, you should make it work with a little delay.

var millisecondsToWait = 200;
setTimeout(function () {
    google.maps.event.trigger(map, 'resize');
    google.maps.event.trigger($('#map'), 'resize');
}, millisecondsToWait);
Sercan Ozdemir
  • 4,641
  • 3
  • 34
  • 64