Googlemaps getting offset - html

Question

Hey everyone anyone ever tried similar incident
its inside a jquery tab system and it works alone or any other place at the website but when inside a tab its getting this offset in some weird manner!
if you tried it or have a solution please post it
<% if (RentalCaseMap.Any()) { %>
<div id="Kort" class="tab-content">
<div id="rental_map_canvas" style="width:656px; height:270px"></div>
<script type="text/javascript" src="/scripts/rentalmap.js"></script>
</div>
<% } %>
....
<input type="hidden" id="HiddenGeoLat" value="<%=CurrentContent.GeoLat %>" />
<input type="hidden" id="HiddenGeoLng" value="<%=CurrentContent.GeoLng %>" />
Then script file
$(window).load(function () {
initialize();
});
function initialize() {
var jeudanStyles = [{ featureType: "all", elementType: "all", stylers: [{ saturation: -99}]}];
var jeudanMapType = new google.maps.StyledMapType(jeudanStyles,
{ name: "Jeudan" });
var myOptions = {
zoom: 16,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
}
};
if (document.getElementById("rental_map_canvas") != null) {
var map = new google.maps.Map(document.getElementById("rental_map_canvas"), myOptions);
map.mapTypes.set('jeudan_map', jeudanMapType);
map.setMapTypeId('jeudan_map');
var locations = [
{ lat: 55.680884, lng: 12.581577, content: '<div class="jeudanparkering">Addresse: Gammel Mønt 1 - 3<br />Mandag - lørdag 06.30-21.00.<br />Mere info...</div>' }
];
var marker, i;
var image = new google.maps.MarkerImage('/images/maps-logo-small.png', new google.maps.Size(35, 40), new google.maps.Point(0, 0), new google.maps.Point(35, 40));
var shadow = new google.maps.MarkerImage('/images/maps-logo-shadow-small.png', new google.maps.Size(74, 37), new google.maps.Point(0, 0), new google.maps.Point(34, 37));
var shape = {
coord: [1, 1, 1, 40, 35, 40, 35, 1],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng($("#HiddenGeoLat").val(), $("#HiddenGeoLng").val()), /*new google.maps.LatLng(locations[i].lat, locations[i].lng),*/
map: map,
shadow: shadow,
icon: image,
animation: google.maps.Animation.DROP,
shape: shape
});
marker.content = locations[i].content;
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
map.setCenter(marker.position);
}
};
}

Answer 1

You need to call google.maps.event.trigger(map, 'resize');

Answer 2

$("#liKort").click(function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(marker.position);
});