CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Ben
Ben

Reputation: 129

Google Maps resize and centre in tabs system

I have am currently using Google Maps within a hidden tabs system. All works fine except the map seems to go off center and I have to scroll to find my marker.

I have managed to get the full map to load, as before only a section of the map was visible due to the hidden attribute.

I have used the script below but I receive a Javascrip error "Object # has no method 'getCenter'" when trying to use the .getCenter to centralise the map.

<script type="text/javascript">
    $(document).ready(function(){
    $('#hotel-listing .option').hide();
    $('#hotel-listing .option:first').show();
    $('#hotel-listing nav ul li a:first').addClass('active');
    $('#hotel-listing nav ul li a').click(function(){ 
    $('#hotel-listing nav ul li a').removeClass('active');
    $(this).addClass('active');
    var currentTab = $(this).attr('href');
    $('#hotel-listing .option').hide();
    $(currentTab).show();
 var currCenter = map.getCenter();
 google.maps.event.trigger(map, 'resize');
 map.setCenter(currCenter);
    return false;
    }); 
    });
</script>

Any assistance appreciated.

Thanks

Upvotes: 1

Views: 255

Answers (1)

charlietfl
charlietfl

Reputation: 171669

You have likely defined map as a var inside a map initialization function and are unable to access it due to scope.

If you define var map; as a global, then within your map initialization function remove var your code will likely work. Without seeing ho your map constructor code is set up this is still only a guess, but based on most google maps examples, a good educated guess

Upvotes: 1

Related Questions