Google Maps don't fully load

user_450454 0
Viewed 14378

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 implement the two maps but get a weird problem. The small map is working fine, but on the big map only a small area of the div is filled with the map, the rest is empty. (See the image.)

Google Maps error

I use the following code to display the two maps:


   function initialize() {
    var latlng = new google.maps.LatLng(51.92475, 4.38206);
    var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({position: latlng, map:map, title:"Home"});
    var image = '/Core/Images/Icons/citysquare.png';
    var myLatLng = new google.maps.LatLng(51.92308, 4.47058);
    var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre"});
    marker.setMap(map);

    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); 
   }
   [..]
   jQuery(document).ready(function () {
    [..]
    initialize();
   });

What's going wrong here?

EDIT:

Unfortunately the suggestions below doesn't seem to work. The closes i came is to remove the display:none from the elements and set the elements to hide with jquery


   [..]
   jQuery(document).ready(function () {
    [..]
    $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).hide();
   });

With the following result alt text

google-maps jquery javascript
7 Answers
<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>
user_27916410
Related