моя карта google не полностью загружена

Question

Я использую карту google map whit dragable marker, но ее не полностью загружен, и когда я использую элемент проверки, который он загрузил! , когда я использую коды на другой странице, он работает, но на моем сайте нет.

Что мне делать? , пожалуйста, помогите мне. это мой код:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var geocoder = new google.maps.Geocoder(); 

function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     updateMarkerAddress(responses[0].formatted_address); 
    } else { 
     updateMarkerAddress('Cannot determine address at this location.'); 
    } 
    }); 
} 

function updateMarkerStatus(str) { 
    document.getElementById('markerStatus').innerHTML = str; 
} 

function updateMarkerPosition(latLng) { 
    document.getElementById('info').innerHTML = [ 
    latLng.lat(), 
    latLng.lng() 
    ].join(', '); 
} 

function updateMarkerAddress(str) { 
    document.getElementById('address').innerHTML = str; 
} 

function initialize() { 
    var latLng = new google.maps.LatLng(35.693, 51.437); 
    var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
    zoom: 8, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    title: 'Point A', 
    map: map, 
    draggable: true 
    }); 

    // Update current position info. 
    updateMarkerPosition(latLng); 
    geocodePosition(latLng); 

    // Add dragging event listeners. 
    google.maps.event.addListener(marker, 'dragstart', function() { 
    updateMarkerAddress('Dragging...'); 
    }); 

    google.maps.event.addListener(marker, 'drag', function() { 
    updateMarkerStatus('Dragging...'); 
    updateMarkerPosition(marker.getPosition()); 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 
    updateMarkerStatus('Drag ended'); 
    geocodePosition(marker.getPosition()); 
    }); 

} 

// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

<div id="mapCanvas" style="width:715px; height:400px;"></div> 
    <div id="infoPanel"> 
    <b>Marker status:</b> 
    <div id="markerStatus"><i>Click and drag the marker.</i></div> 
    <b>Current position:</b> 
    <div id="info"></div> 
    <b>Closest matching address:</b> 
    <div id="address"></div> 
    </div> 

Answer 1

Вы должны установить по крайней мере, параметр высоты к #mapCanvas. В противном случае он не отобразит карту. попробовать:

<div id="mapCanvas" style="height:200px;"></div> 

Редактировать

Как выяснилось ниже в комментариях, проблема была с свойствами CSS.