Google Map shows only partially

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:

Now to add a little more detail:

• It works fine in IE
• It looks like in the screenshot in FF and Chrome.
• In Chrome ist works as soon, as I open the developer console

Especially the last point is the one I'm wondering most about. I guess opening the developer console re-executes some JavaScript.

So: Can I call a function to re-execute JavaScript, the way the developer console does?

This is the code:

<script type="text/javascript">
{literal}
function initialize() {
  if (GBrowserIsCompatible()) {

    var map = new GMap2(document.开发者_StackOverflow社区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 != "" && 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}

This is where I put the div:

    <fieldset style="-moz-border-radius: 1em;  -webkit-border-radius: 1em;"> 
      <legend>Karte</legend>
      <div id="map" title="Lage von '{$name}'"><br>Die Karte wird geladen...<br><br>Hinweis: Damit dies funktioniert müssen Sie in Ihrem Browser JavaScript aktivieren</div>
      Falls sich der Marker nicht auf der richtigen Position befinden sollte, bewegen Sie diesen mit Ihrer Maus auf die richtige Position.
      <br>Länge: <input type="text" id="lat" name="lat" value="{$gmap_lat}">
      Breite: <input type="text" id="lon" name="lon" value="{$gmap_lon}">
    </fieldset>

And on the div the following CSS rules apply:

Found the issue. I was hiding the block, GMaps was in

<div id="step2" style="display:none">

But it seems a block containing the map may not be hidden, when GMaps loads.

So I changed it like this

<div id="step2">

and everything worked. But as I just like to show "step1" in the beginning, I do a

$('#step2').hide();

once the map is loaded.

It's realy strange behaviour of Chrome and FF, but I'm glad it works with this workaround. Thanks for your help.

I've found that any hide and show operations which are performed on div with google map by using css 'display' property (or jQuery hide() and show() function) causing partially view of the map.

Instead of 'display' I use 'visibility' (hidden, visible) and everything is fine. What I expected was to show the map on a popup. However 'visibility' takes space even when its attribute is set to hidden, but since I use 'z-index' for the popup it does not affect a base layer (0 z-index).

Regards Bronek

This may help...

Google Maps not rendering completely on page?

Try google.maps.event.trigger(map, "resize");

I found a simple solution for the partially loaded google map. Usually it is caused by the onLoad() being called at times when the rest of the page (including your map element) is not completely loaded. This causes partial map load. A simple way around this issue is to change your onLoad body tag action as follows:

old: onload="initialize()"


new: onLoad="setTimeout('initialize()', 2000);"

this waits 2 sec. before the Google JavaScript accesses the correct size attributes. Hope this helps :)

BTW, this is my top Javascipt part in case you wandering ( exactly as described in Google Documentation but because I am calling the Latitude and Longitude from PHP variables, hence the PHP snippets :)

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

             var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
      var marker = new google.maps.Marker({
        position:point,
        map:map })      
     } </script>

Call to Initialize() on pagebeforeshow event and try this

jQuery(document).delegate( "#page-map", "pageshow", function(event){
google.maps.event.trigger(map, "resize");
});

Opening console doesn't re-executes any JS! The page size gets changed by it, Google map API then fires 'resize' event and loads the map again.

I faced the same issue when setting the map centre manually. I solved it by the below code:

google.maps.event.trigger(map, "center_changed");