Пустой экран с Google примером Google map v3

-2

Я скопировал код из Google, но у меня есть пустая страница ... Что я сделал не так? http://raidsnature.com/raidsnature/raidsnature.nsf/googlemap4 Пустой экран с Google примером Google map v3

спасибо!

PS: "Google Maps API v3" активируется и ключ API (активирован 30 апр 2013 12:42 PM) является тот, который до сих пор работает на моей старой страницы v2: http://raidsnature.com/raidsnature/raidsnature.nsf/GoogleMap?OpenPage&Raid=1&Trail=1&CO=1

здесь является код, который не работает:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCklzGa0v5sp8cWNLXnEZph20tKa_rXups&sensor=false" type="text/javascript"></script> 

    <script> 
var map; 
function initialize() { 
    var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

источник

2013-11-25 user3034253

Ваш размер карты canvas не имеет размера. http://stackoverflow.com/search?q=user%3Ame+%5Bgoogle-maps-api-3%5D+map+doesn%27t+have+a+size – geocodezip

вы пропускаете CSS часть, например Google, который (как geocodezip сказал) будет определять размер карты холст, но вы также должны определить html и body высоту.

Цитирую Google's Hello World example:

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map-canvas { height: 100% } 
</style>

Этот CSS декларация указывает, что контейнер карты (названный карта холст) должен занимать 100% высоты тела HTML. Обратите внимание, что мы должны специально объявить эти проценты для <body> и <html>.

Полный рабочий пример можно найти по адресу Google Maps API docs (переход на вторую вкладку «JavaScript + HTML»).

источник

2013-11-26 11:58:31 psxls

Пустой экран с Google примером Google map v3

ответ

Смежные вопросы