简单的Google Maps调用不起作用JS

Question

我正在尝试创建一个简单的Google地图，但是这个简单的设置似乎不起作用，任何人都可以告诉我我在做什么错？谢谢！

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();
});

Answer 1

您应该向Div添加宽度和高度

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

Answer 2

• 您的callback参数未给出＆lt; script＆gt;。
• div无宽度＆amp;身高。
• 如果您不使用回调参数，则＆lt; script＆gt;不需要延期

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>

Answer 3

尝试添加＆amp; callback = initmap in script call call

Answer 4

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

Answer 5

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

通过使用内联CSS

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

或使用CSS

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

测试：https：//jsfiddle.net/lmcklljj/

Answer 6

请将高度和宽度设置为您地图div

coz，默认情况下，div高度和宽度为0

请像这样更改您的DIV

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

或u可以设置这样的CS：

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