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:

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

This may help...

Google Maps not rendering completely on page?

Answer 5

Call to Initialize() on pagebeforeshow event and try this

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

Answer 6

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