Google Map shows only partially

Question

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:

alt text

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.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:

alt text

Sounds like a CSS issue - Google Maps uses a lot CSS to give the impression the map is floating. There is a shift of - seemingly - a square-image (go to Maps, right click and do "View image", the size of your shift is like the one of an image). — Déjà vu, Dec 05 '10 at 11:53
Hmm, I have had stuff like this when injecting broken (un-geocodable or geographically impossible) markers into the map, but that doesn't seem to be the case here. What happens if you deactivate all your style sheets for a moment? — Pekka, Dec 05 '10 at 12:05
Then there is no map at all. Its folded inside the fieldset, which is not heigh enough. — JochenJung, Dec 05 '10 at 12:39
Then just set that? Removing as much CSS as possible would eliminate the suspicion that it is some rule acting weirdly — Pekka, Dec 05 '10 at 13:12

score 12 · Accepted Answer · edited Nov 18 '16 at 22:13

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.

score 6 · Answer 2 · answered May 28 '12 at 10:50

6

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

answered May 28 '12 at 10:50

Bronek

10,722
2
45
46

This just worked for me - I had it changing between display:none and display:block and the maps weren't loading properly. Changing it to visibility:hidden and visibility:visible made it work! Thanks, Bronek, – Sinister Beard Jul 19 '13 at 09:03

score 4 · Answer 3 · answered Jun 15 '12 at 04:39

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>

score 4 · Answer 4 · answered Jul 24 '13 at 01:27

4

Call to Initialize() on pagebeforeshow event and try this

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

answered Jul 24 '13 at 01:27

Rolando

41
3

score 4 · Answer 5 · edited May 23 '17 at 11:52

4

This may help...

Google Maps not rendering completely on page?

edited May 23 '17 at 11:52

Community

1
1

answered Dec 05 '10 at 17:03

Vishwanath

6,284
4
38
57

score 4 · Answer 6 · answered Dec 06 '10 at 08:18

4

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

answered Dec 06 '10 at 08:18

Argiropoulos Stavros

9,436
11
61
79

Tried it, but did not help. But I found a workaround: see my answer. But as I read, this seams to fix a similar issue for some people +1 – JochenJung Dec 06 '10 at 09:00

score 1 · Answer 7 · answered Sep 10 '19 at 13:52

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");

Google Map shows only partially

7 Answers7

Linked