简单的谷歌地图调用不起作用的js答案

【问题标题】：Simple google maps call not working js简单的谷歌地图调用不起作用的js
【发布时间】：2017-03-09 11:22:11
【问题描述】：

我正在尝试创建一个简单的谷歌地图，但是这个简单的设置似乎不起作用，谁能告诉我我做错了什么？谢谢！

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

【问题讨论】：

does not work 这是什么意思？ - 什么不起作用？你在期待什么？你遇到了什么错误？
期望让地图工作并且它没有显示任何错误！必须修复它，以某种方式将文档放在 init 之上。不知道为什么！

标签： javascript jquery google-maps maps

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

没有宽度和高度的 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>

【讨论】：

【解决方案3】：

尝试在脚本调用中添加 &callback=initMap

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

使用内联css

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

或者使用 CSS

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

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

【讨论】：

【解决方案6】：

请为你的地图div设置高度和宽度

Coz，默认div高宽为0

请像这样更改您的 div

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

或者你可以这样设置css：

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

【讨论】：