【问题标题】：How can I change the starting location of Google Maps showed in my website?如何更改我网站上显示的 Google 地图的起始位置？
【发布时间】：2022-01-09 12:18:10
【问题描述】：

我有一个显示谷歌地图的简单网站。我的问题是，现在它从纽约开始，我希望它从伦敦开始。我该怎么做？

在我的 HTML 页面中

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY;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 和流程对我来说是非常新的，如果有人有答案，我将不胜感激！太棒了！

【问题讨论】：

MarkerImage 已弃用，并已从文档中删除，请改用匿名 Icon 接口（可能不是问题），minimal reproducible example 可以证明您的问题，最好是工作 @987654322重现您的问题的@会有所帮助。您是否收到任何 JavaScript 错误？

标签： javascript html google-maps web google-maps-api-3

【解决方案1】：

在正确的位置居中地图

您需要使用 LatLng 对象 将地图置于正确位置。实际上，您将缺少的变量称为“伦敦”以使地图居中。初始化地图时，在中心参数中设置伦敦地点的纬度。你可以试试这样的：

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

将代码中的center: London, 行替换为center: {lat: 51.517022, lng: -0.127011}, 行。

不要共享您的 API 密钥

我认为非常重要（非常）不要在stackoverflow或任何其他公共场所发布您的apiKey。

请注意帖子开头（<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSy... the rest of your key ... callback=initMap" async defer> 行）。只需将与您对应的部分替换为 MY_API_KEY 之类的提及即可。我希望您已通过特定域保护您的密钥。

使用文档

Javascript Google Map API 的文档确实是一个好的开始。如果你对 js 有一定了解的话，真的很容易上手，我想你可以在这里找到任何你想要的东西。

【讨论】：