Google map not centered in jQuery tabs when inactive tab has display:none

Question

I am trying to implement GMap for my real-estate site where each property has own map based on location Latitude & Longitude with custom marker icon. The problem is that after initialisation map is not centered on marker icon. I also have read plenty of posts but any solution wont work for me so will be very glad to find a working solution if someone is capable to assist.

Here is what I`ve done so far.

Code in view file - I`am using data-atribute for dynamic location (LatLong) values and this works with my custom fields in property administration.

<div class="property">
<ul class="tabs clearfix">
    <li class="current">Tab 1</li>
    <li>Tab 2</li>      
    <li>Tab 3</li>          
</ul>
<div class="box visible">
    Tab 1 content
</div>
<div class="box">
    Tab 2 content
</div>
<div class="box">
    <div id="map" class="property-map" data-latitude="xxxxxx" data-longitude="xxxxxx"></div>
</div>
</div>

Jquery:

 $('ul.tabs').on('click', 'li:not(.current)', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.property').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
})
$('ul.tabs').on('click', 'li:not(.current)', function() {
    google.maps.event.trigger(map, "resize");
})

Css:

.property { margin-top:30px; }
.property .box { display: none; }
.property .box.visible { display: block; }
.property .tabs li { position:relative; float:left; margin:0 -1px 0 0;  padding:14px 35px; text-transform:uppercase; font-weight:600; color:#666; border:1px solid #e9e9e9; cursor:pointer; transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out;}
.property .tabs li:hover { color:#000; }
.property .tabs li.current { margin-top:-2px; color:#000; border-top:3px solid #fcb042; border-bottom:1px solid #fff; background: #f0f0f0;}
.property .box { margin-top:-1px; padding:16px 19px 18px; line-height:20px; color:#666; border:1px solid #e9e9e9;}

.property-map { width:800px; height: 420px; }

Main index file:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"" type="text/javascript"></script>
<script type="text/javascript">


function initialize_map() {

var latitude = $('#map').data('latitude');
var longitude = $('#map').data('longitude');

    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 17,
        scrollwheel: true,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);


    var marker = new google.maps.Marker({
        position: myLatlng,
        icon: '../images/new-marker.png',
        title:"Marker title",
        map: map

    });


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

</script>

Answer 1

After the fade completes, you need to set the center of the map after triggering the resize event.

$(this).addClass('current').siblings().removeClass('current')
  .parents('div.property').find('div.box').eq($(this).index()).fadeIn(150, 
    function() {
      google.maps.event.trigger(map, "resize"); 
      map.setCenter(mapOptions.center);
    })
  .siblings('div.box').hide();
})

proof of concept fiddle

code snippet:

var mapOptions, map;

function initialize_map() {

  var latitude = $('#map').data('latitude');
  var longitude = $('#map').data('longitude');

  var myLatlng = new google.maps.LatLng(latitude, longitude);
  mapOptions = {
    zoom: 17,
    scrollwheel: true,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);


  var marker = new google.maps.Marker({
    position: myLatlng,
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
    title: "Marker title",
    map: map

  });
  $('ul.tabs').on('click', 'li:not(.current)', function() {
    $(this).addClass('current').siblings().removeClass('current')
      .parents('div.property').find('div.box').eq($(this).index()).fadeIn(150, function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(mapOptions.center);
      }).siblings('div.box').hide();
  })
}
google.maps.event.addDomListener(window, 'load', initialize_map);

.property {
  margin-top: 30px;
}
.property .box {
  display: none;
}
.property .box.visible {
  display: block;
}
.property .tabs li {
  position: relative;
  float: left;
  margin: 0 -1px 0 0;
  padding: 14px 35px;
  text-transform: uppercase;
  font-weight: 600;
  color: #666;
  border: 1px solid #e9e9e9;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
}
.property .tabs li:hover {
  color: #000;
}
.property .tabs li.current {
  margin-top: -2px;
  color: #000;
  border-top: 3px solid #fcb042;
  border-bottom: 1px solid #fff;
  background: #f0f0f0;
}
.property .box {
  margin-top: -1px;
  padding: 16px 19px 18px;
  line-height: 20px;
  color: #666;
  border: 1px solid #e9e9e9;
}
.property-map {
  width: 800px;
  height: 420px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="property">
  <ul class="tabs clearfix">
    <li class="current">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="box visible">Tab 1 content</div>
  <div class="box">Tab 2 content</div>
  <div class="box">
    <div id="map" class="property-map" data-latitude="42" data-longitude="-72"></div>
  </div>
</div>