如何使用地图上的按钮（不在地图下方或上方）将地图居中到 Google Map API 3 中的默认位置？

Question

首先这不是一个重复的问题。堆栈溢出和其他网站上的其他问题没有我要求的完整内容。我不想要 iframe 下方的按钮。

我想要一个按钮，比如 iframe 右下角地图上方的小红圈按钮

Red Circle Button Sample - I want to keep a button like this in bottom right corner of the div/iframe

我创建了一个小提琴来让你理解这个问题。链接在问题的最后部分

代码

HTML

<div id="map"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};

  function initMap() {
  var myOptions = {
  zoom: 13,
  center: location1,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

 marker = new google.maps.Marker({
  position: location1,
  map: map,
  title: 'Click to zoom'
});
  } 

 function changeCenter(center) {
  map.setCenter(center);
  marker.setPosition(center);
}

</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>

CSS

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

还有另一件事没有发生 - 我将默认缩放级别保持在 13 ，现在当我放大 3 倍或说缩小 3 倍时，当我点击按钮时，我得到了默认的缩放位置位置为 10 或 16，而不是原来的 13。请帮我解决这个问题

@saravana 只解决了我的一小部分问题。

这是我更新的小提琴

updated FIDDLE with zoom issue solved

主要的事情仍然存在 - 我想在地图上创建一个自定义按钮。请帮我解决这个问题

Answer 1

请将您的更改中心功能替换为以下代码

function changeCenter(center) {
    map.setCenter(center);
    map.setZoom(13); 
    marker.setPosition(center);
}

您可以使用 map.setZoom() 函数设置缩放级别。干杯！！！

更新：

请将您的html代码替换为小提琴中的以下代码

我们必须在谷歌地图中手动添加自定义按钮或图像。我希望这会有所帮助

<div id="map"></div>
<div><img src="http://www.clker.com/cliparts/X/9/P/m/2/g/transparent-red-circle-md.png" width="25px" style="position: fixed;z-index: 9999; right:10px; top:225px; float: right;" onclick="javascript:changeCenter(location1);"></div>
<script>
  var map;
  var marker;
  var location1 = {
    lat: 34.0522,
    lng: -118.2437
  };

  function initMap() {
    var myOptions = {
      zoom: 13,
      center: location1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

     marker = new google.maps.Marker({
      position: location1,
      map: map,
      title: 'Click to zoom'
    });
      } 

  function changeCenter(center) {
      map.setCenter(center);
      map.setZoom(13);
      marker.setPosition(center);
    }

</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>