为什么谷歌地图显示为灰色而不初始化缩放

Question

我正在使用谷歌地图api制作一张带有自定义标记和按钮的地图，这些标记和按钮可以更改地图的中心和缩放。我有一个地图和信息窗口的全局变量。我的地图在初始化时显示为灰色，没有缩放控制。
控制台中没有显示任何错误消息。我有五个按钮：亚洲、北美、中东、纽约、新英格兰。这些按钮用于更改地图的中心和缩放。但是我想让地图从地图的初始位置开始

var mapOptions= {
    center: new google.maps.LatLng(38.423734,27.142826), 
    zoom: map.setZoom(4)
  };

我通过一个位置对象使用foreach循环来定制地图上的标记和信息窗口。我还有一个功能来设置制造商的类型。这很有效。

$(document).ready(function(){

var map, infoWindow;    

function initMap() {

map = new google.maps.Map(document.getElementById('map'), mapOptions)

var mapOptions = {
    center: new google.maps.LatLng(38.423734,27.142826), 
    zoom: map.setZoom(4)
  };

$("#asia").on('click', function () {
newLocation(37.566535,126.977969,5);
});
$("#northAmerica").on('click', function () {
newLocation(30.902225,-90.659180,4);
});
$("#middleEast").on('click', function () {
newLocation(38.423734,27.142826,4);
});
$("#newYork").on('click', function () {
newLocation(40.753159,-73.98936,12);
});
$("#newEngland").on('click', function () {
newLocation(42.292783,-71.304496,7);
});

google.maps.event.addDomListener（窗口，加载，initMap）；是for循环添加自定义标记后initMap函数的一部分。

在我关闭initMap函数后，但仍然在$（文档）中。就绪（函数（）{调用initMap，并google.maps.event.addDomListener（窗口，加载，initMap）定义函数newPlace；

对于自定义标记的每个循环

function newLocation(newLat,newLng,newZoom) {
map.setCenter({
    lat : newLat,
    lng : newLng,
  }); 
map.setZoom(newZoom)
};

initMap();

});

Answer 1

我在您发布的initMapfunction:uncaughttypeerror:map.setZoom不是这行的函数：zoom:map.setZoom（4）

那应该是：zoom： 4

代码片段：

function initMap() {
  var mapOptions = {
    center: new google.maps.LatLng(38.423734, 27.142826),
    zoom: 4
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions)

  $("#asia").on('click', function() {
    newLocation(37.566535, 126.977969, 5);
  });
  $("#northAmerica").on('click', function() {
    newLocation(30.902225, -90.659180, 4);
  });
  $("#middleEast").on('click', function() {
    newLocation(38.423734, 27.142826, 4);
  });
  $("#newYork").on('click', function() {
    newLocation(40.753159, -73.98936, 12);
  });
  $("#newEngland").on('click', function() {
    newLocation(42.292783, -71.304496, 7);
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

function newLocation(newLat, newLng, newZoom) {
  map.setCenter({
    lat: newLat,
    lng: newLng,
  });
  map.setZoom(newZoom)
};

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="asia" value="asia" type="button" />
<input id="northAmerica" value="northAmerica" type="button" />
<input id="middleEast" value="middleEast" type="button" />
<input id="newYork" value="newYork" type="button" />
<input id="newEngland" value="newEngland" type="button" />
<div id="map"></div>