2017-03-09 62 views
-1

我想創建一個簡單的谷歌地圖,但這個簡單的安裝程序似乎並沒有工作,任何人都可以告訴我我做錯了什麼?謝謝!簡單的谷歌地圖調用不工作js

HTML

<script defer 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&"> 

</script> 

<div id="map"> </div> 

JS

function initMap() { 
    console.log('test'); 
    var myLatLng = {lat: -25.363, lng: 131.044}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: myLatLng 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: 'Hello World!' 
    }); 
} 

文檔功能齊全

$(document).ready(function(){ 
    initMap(); 
}); 
+3

'不work'這是什麼意思? - 什麼不行?你在期待什麼?你得到什麼錯誤? –

+0

預計讓地圖工作,並沒有顯示任何錯誤!必須修復它,以便以某種方式將文檔準備好在init之上。不知道爲什麼壽! – Wesleyvans

回答

0
  • callback參數。
  • div無寬&高度。
  • ,如果你不使用回調參數,該<腳本>不需要推遲

function initMap() { 
 
    console.log('test'); 
 
    var myLatLng = {lat: -25.363, lng: 131.044}; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 4, 
 
     center: myLatLng 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: 'Hello World!' 
 
    }); 
 
}
<script defer 
 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&callback=initMap"> 
 

 
</script> 
 
<div id="map" style="width:300px;height:300px;"> </div>

0

嘗試在腳本調用添加&回調= initMap您API後

1

你應該爲你的div添加寬度和高度。

<div id="map" style="width:400px;height:400px;"></div> 
+0

這也有助於感謝! – Wesleyvans

0

$(document).ready(function(){ 
 
    initMap(); 
 
}); 
 

 
function initMap() { 
 
    console.log('test'); 
 
    var myLatLng = {lat: -25.363, lng: 131.044}; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 4, 
 
     center: myLatLng 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: 'Hello World!' 
 
    }); 
 
}
#map 
 
{ 
 
width:500px;height:500px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script defer 
 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&"> 
 

 
</script> 
 

 
<div id="map" ></div>

0

好代碼工作。 您需要指定div的高度和寬度。

無論是使用內聯CSS

style="width:400px;height:400px;" 

,或通過使用CSS

#map { 
    width: 400px; 
    height: 400px; 
} 

測試:https://jsfiddle.net/LmckLLjj/

0

請設置高度和寬度,以你映射的div

堂妹,由默認的div高度和寬度爲0

請改變你的DIV像這樣

<div id="map" style="width:100px;height:100px;"></div> 

或U可以設置CSS是這樣的:在<腳本>沒有給出

<style> 
#map{ 
height:100px; 
width:100px; 
} 
</style>