title: Google Map shows only partially
body: <p>The Google Map I have is only beeing rendered partially and is centered to the wrong point (it should center to the marker). See below:</p>
  
  <p><img src="https://i.stack.imgur.com/i3ksk.jpg" alt="alt text"></p>
  
  <p>Now to add a little more detail:</p>
  
  <ul>
  <li>It works fine in IE</li>
  <li>It looks like in the screenshot in FF and Chrome.</li>
  <li>In Chrome ist works as soon, as I open the developer console</li>
  </ul>
  
  <p>Especially the last point is the one I'm wondering most about. I guess opening the developer console re-executes some JavaScript.</p>
  
  <p>So: Can I call a function to re-execute JavaScript, the way the developer console does?</p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  {literal}
  function initialize() {
    if (GBrowserIsCompatible()) {
  
      var map = new GMap2(document.getElementById("map")); //, { size : {width:600,height:600} }
      map.addControl(new GLargeMapControl3D());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());
      map.setCenter(new GLatLng(51.17689812200107, 9.84375), 5);
      map.checkResize();
  
      var geocoder = new GClientGeocoder();
  
      function showPoint(lat, lon) {
        if (lat != "" &amp;&amp; lon != "") {
          var point = new GLatLng(lat, lon);
          map.setCenter(point, 10);
          var marker = new GMarker(point, {draggable: true});
          GEvent.addListener(marker, "dragstart", function() {
            // map.closeInfoWindow();
          });
          GEvent.addListener(marker, "dragend", function() {
            var newPoint = marker.getLatLng();
            $('#lat').val(newPoint.lat());
            $('#lon').val(newPoint.lng());
            // marker.openInfoWindowHtml("Neue Koordinaten Lat: "+ newPoint.lat() +" Lon: "+ newPoint.lng());
          });
          map.addOverlay(marker);
        }
      }
    {/literal}showPoint("{$gmap_lat}", "{$gmap_lon}");{literal}
    }
  }
  {/literal}
  </code></pre>
  
  <p>This is where I put the div:</p>
  
  <pre><code>    &lt;fieldset style="-moz-border-radius: 1em;  -webkit-border-radius: 1em;"&gt; 
        &lt;legend&gt;Karte&lt;/legend&gt;
        &lt;div id="map" title="Lage von '{$name}'"&gt;&lt;br&gt;Die Karte wird geladen...&lt;br&gt;&lt;br&gt;Hinweis: Damit dies funktioniert müssen Sie in Ihrem Browser JavaScript aktivieren&lt;/div&gt;
        Falls sich der Marker nicht auf der richtigen Position befinden sollte, bewegen Sie diesen mit Ihrer Maus auf die richtige Position.
        &lt;br&gt;Länge: &lt;input type="text" id="lat" name="lat" value="{$gmap_lat}"&gt;
        Breite: &lt;input type="text" id="lon" name="lon" value="{$gmap_lon}"&gt;
      &lt;/fieldset&gt;
  </code></pre>
  
  <p>And on the div the following CSS rules apply:</p>
  
  <p><img src="https://i.stack.imgur.com/PeQLf.jpg" alt="alt text"></p>