javascript - Google Map Centers at top left corner

Question

I've been looking at many different examples, problems, and other things regarding this and I can't seem to find anything, so i'll finally ask a question.

The map I have does not center the marker and doesn't even display it. The point it the very top left corner. See here: http://i.imgur.com/Cc1ZK.png

I have a tab system for contact information. When someone clicks a tab, the map and info slides down and shows up the proper marker (4 separate maps), however I can't get the first one to work so I can't copy/paste it.

Here is my code:

Script:

var latlng = new google.maps.LatLng(42.3535727, -83.0591444);
var options = {  
      zoom: 14,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
var map = new google.maps.Map(document.getElementById('detroit_map'), options);
marker1 = new google.maps.Marker({  
            position: new google.maps.LatLng(42.3535727, -83.0591444),
            map: map
          }); 
map.setCenter(latlng);

Html:

<div id="detroit_map" style="width:270px;height:170px;"></div>

P.S, I get no errors in chrome developer tools.

It's hopefully something really simple that I overlooked.

Thanks

Found the answer for future viewers:

Turns out, my tabs causing the display between block, and none were making my map load weird. I made an initialize function for each, and called setTimout('functionName', 1000); to call the maps to load.

I changed my map code a little bit, but everything can we found on w3schools under their tutorial.

Answer 1

Initialize the map after the tab is clicked. This also works for the iframe google map, when used inside a tab.