Google Maps API - mapa nie jest załadowana

Próbuję umieścić mapę Google w mojej witrynie, ale bez większego powodzenia. Użyłem następnej sekcji kodu: (używam rzeczywisty klucz API na moim komputerze)Google Maps API - mapa nie jest załadowana

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=myapikey&sensor=true"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

wewnątrz <body> sekcja Dodałem <div id="map-canvas" style="width: 40%; height: 40%"></div>

Jak mogę obsługiwać ten problem? Z góry dziękuję

Źródło

2013-03-29 Anonymous

Wydaje się problem z klucz API, spróbuj usunąć to z URL –

Jak już wspomniałem w poście - mam klucz API, po prostu zastąpiłem go "myapikey" dla posta –

użyj narzędzi chrome dev, aby sprawdzić, czy załadowane są pliki js map, jeśli tak, użyj narzędzia do debugowania i ustaw punkt przerwania na mapie var i upewnij się, że obiekt jest tworzony. –

Określ szerokość i wysokość płótna jako długości bezwzględnej zamiast %.

Na przykład

<div id="map-canvas" style="width: 300px; height: 400px"></div>

Alternatywnie trzymać % dla płótna, lecz umieścić w pojemniku o określonej szerokości i wysokości jak długości bezwzględnych.

<div style="width:1000px; height:800px;"> 
    <div id="map-canvas" style="width: 40%; height: 40%"></div> 
</div>

Źródło

2013-03-29 10:45:32

Mamy zwycięzcę :) Dzięki! –

W przypadku nie trzeba chcesz naprawić swój rozmiar do absolutnego szerokość i wysokość w pikselach, upewnić się, że wszystkie tagi macierzyste mają wysokość 100%

na przykład html -> ciało -> some_ids -> map-id

Wszystkie z nich mają wysokość i szerokość w%

ref: https://developers.google.com/maps/documentation/javascript/tutorial

Źródło

2017-12-27 12:41:01

Google Maps API - mapa nie jest załadowana

Odpowiedz

Powiązane problemy