如何更改我網站上顯示的 Google 地圖的起始位置？

Question

我有一個顯示谷歌 map 的簡單網站。 我的問題是，現在它從紐約開始，我希望它從倫敦開始。 我該怎么做？

在我的 HTML 頁面中，我有

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBsXUGTFS09pLVdsYEE9YrO2y4IAncAO2U&amp;callback=initMap" async defer></script> `` 和<div id="map" class="map height-400"></div>我相信這是它使用的 java 腳本 -

"use strict";

This is the gmap.js I am using which I believe picks the location. 
window.initMap = function() {
  var customMapType = new google.maps.StyledMapType([
    {
      stylers: [
        {'saturation': -100},
        {'lightness': 50},
        {'visibility': 'simplified'}
      ]
    },
    {
      elementType: 'labels',
      stylers: [{visibility: 'on'}]
    },
    {
      featureType: 'road',
      stylers: [{color: '#bbb'}]
    }
  ], {
    name: 'Dublin'
  });

  var image = new google.maps.MarkerImage(
    'img/widgets/gmap-pin.png',
    new google.maps.Size(48,54),
    new google.maps.Point(0,0),
    new google.maps.Point(24,54)
    );

  var customMapTypeId = 'custom_style';

  var brooklyn = {lat: 41.850, lng: -73.961};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    scrollwheel: false,
    streetViewControl: false,
    mapTypeControl: false,
    center: London,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
    }
  });

  var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Brooklyn</h1>'+
    '<div id="bodyContent">'+
    '<p>277 Bedford Avenue, <br> Brooklyn, NY 11211, <br> New York, USA</p>'+
    '</div>'+
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 300
  });

  var marker = new google.maps.Marker({
    map: map,
    clickable: true,
    icon: image,
    title: 'Brooklyn',
    position: brooklyn
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);
}

整個 API 和過程對我來說都很新，如果有人有答案，我很感激！ 泰！

Answer 1

您需要使用 latLng object 將 map 居中在正確的位置。 實際上，您將 map 的中心稱為缺失變量“London”。 當您像這樣初始化 map 時，在中心參數中設置倫敦地點的緯度：

var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 6,
   scrollwheel: false,
   streetViewControl: false,
   mapTypeControl: false,
   center: {lat: 51.517022, lng: -0.127011},
   mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
   }
});

Javascript Google Map API 1的文檔確實是一個好的開始。