Google Maps don't fully load

Question

I have a somewhat strange problem. I have two maps on my site, a big one and a small one. I want to use the big one to show a route to a certain address. I\'m now trying to

Answer 1

When you're loading in the large map, try adding this at the end of your map code.

map.checkResize();

When Google Maps first renders on your page, it has the dimensions recorded so that it displays the map images in that size. If you're resizing the map dynamically, you need to tell the API to check the new size.

Answer 2

<script type='text/javascript' >
var geocoder, map;
function codeAddress() {
    var address= '<?php echo $this->subject()->address; ?>';
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 13,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon:'http://rvillage.com/application/themes/rvillage/images/map-marker.png'
            }); 
            var infowindow = new google.maps.InfoWindow({ content: 'coming soon' });
            google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, this);         
            });
        }
    });
}

jQuery(document).ready(function () {
    codeAddress();
});
</script>

Answer 3

I fixed it!

I made an own function for the largemap and placed it in the callback when the elements are opened

function largeMap(){
 var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
 var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
 var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
 var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
 largeMarker.setMap(largeMap);
}
[..]
 $("#showRoute").click(function(e){
  e.preventDefault();
  $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500);
  $("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
  $("#closeBarLink").click(function(l){
   l.preventDefault();
   $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500);
  });
  largeMap();
 });

Thanks anyway!!

Answer 4

You are using pop up window with jQuery, and I guest you call initialize() function when document is ready ( $(document).ready(function() {initialize(); }) ). Try call initialize() function after pop up windown showed.

Johnny

Answer 5

Yes, @Argiropoulos-Stavros but, Add it as a listener

    google.maps.event.addListenerOnce(map, 'idle', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(location);
    });

It will begin re-sizing after, map rendered.

Answer 6

I think you are using v3. So google.maps.event.trigger(map, "resize");

Also take a look at here