How do I center my Google maps marker in tab with iframe

Question

I got a problem to center my marker in tab with iframe

Example here , you click on Map tab and the marker is not centered. If direct link without iframe it looking great. You can see here .

var myOptions = {
  zoom: 12,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

The center: myLatlng looks like not working in tab with iframe. How do I fix this? Let me know

Answer 1

I had a similar problem once and I was able to solve it by triggering a resize event and setting the center again when the tab is clicked.

// add this to the tab click event
    google.maps.event.trigger(map, 'resize');
    map.setCenter(myLatlng);

Answer 2

I had a same problem. Solve this with window resize

google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });