简单的谷歌地图调用不工作js

-1

我想创建一个简单的谷歌地图，但这个简单的安装程序似乎并没有工作，任何人都可以告诉我我做错了什么？谢谢！简单的谷歌地图调用不工作js

HTML

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

</script> 

<div id="map"> </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!' 
    }); 
}

文档功能齐全

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

来源

2017-03-09 Wesleyvans

'不work'这是什么意思？ - 什么不行？你在期待什么？你得到什么错误？ –

预计让地图工作，并没有显示任何错误！必须修复它，以便以某种方式将文档准备好在init之上。不知道为什么寿！ – Wesleyvans

您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>

来源

2017-03-09 11:38:55

尝试在脚本调用添加&回调= initMap您API后

来源

2017-03-09 11:25:27 abraham63

你应该为你的div添加宽度和高度。

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

来源

2017-03-09 11:27:09

这也有助于感谢！ – Wesleyvans

$(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>

来源

2017-03-09 11:29:09

好代码工作。您需要指定div的高度和宽度。

无论是使用内联CSS

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

，或通过使用CSS

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

测试：https://jsfiddle.net/LmckLLjj/

来源

2017-03-09 11:30:22 kaldoran

请设置高度和宽度，以你映射的div

堂妹，由默认的div高度和宽度为0

请改变你的DIV像这样

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

或U可以设置CSS是这样的：在<脚本>没有给出

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

来源

2017-03-09 11:31:23

简单的谷歌地图调用不工作js

回答

相关问题