Google map in iframe not centering on the label/marker

I have been trying to embed Google maps using iframe. But the problem is its not centering on the label/marker, rather placing the marker in the top left corner(not visible).

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&amp;source=s开发者_JS百科_q&amp;hl=en&amp;geocode=&amp;z=8&amp;q=Chennai&amp;output=embed"/>

The point to note is that it is working fine when I just paste it in a html file. But in my case the map is implemented like a dropdown using javascript.(see below) I have even tried the solution given here, but no results.

http://prntscr.com/1ziry (here the label is actually in the top left corner but not seen)

Pls help!

Why are you using an iframe for this. My guess is that there is some JS magic that positions the marker and having an iframe will mess it up.

Use the Javascript API and you wont have any problems. http://code.google.com/apis/maps/documentation/javascript/tutorial.html

For me, the problem was the iframe having size 0 when the map was loaded. I added a delay to load the map after the iframe was loaded.

Here is the code I added to my script. (It is run as part of the HTML that is loaded as an iframe):

<script>
  window.onload=function(){loadMapDelayed();}

  // delay map display by 100 milliseconds until iframe renders
  function loadMapDelayed() {
    setTimeout("loadMap()",100);
  }
  function loadMap() {
    // existing code that loads the map
  }
</script>

(thanks to https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ)