Html 自定义GoogleMap嵌入不像iframe嵌入代码那样居中_Html_Google Maps_Google Maps Api 3

Html 自定义GoogleMap嵌入不像iframe嵌入代码那样居中

html google-maps google-maps-api-3

Html 自定义GoogleMap嵌入不像iframe嵌入代码那样居中,html,google-maps,google-maps-api-3,Html,Google Maps,Google Maps Api 3,我使用以下基本代码作为嵌入谷歌地图的框架： <!DOCTYPE html> <html> <head> <style> #map { width: 700px; height: 700px; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script

我使用以下基本代码作为嵌入谷歌地图的框架：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 700px;
        height: 700px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(41.2048114,8.0734625),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
    <a href="https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map">Adding a Google Map to your website</a>
  </body>
</html>


#地图{
宽度：700px；
高度：700px；
}
函数初始化（）{
var mapCanvas=document.getElementById（'map'）；
变量映射选项={
中心：新google.maps.LatLng（41.2048114,8.0734625），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（mapCanvas，mapOptions）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

然而，地图并不像iframe/url嵌入方法那样以所需国家为中心：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

注意：我检查了其他问题，但代码似乎过时了，或者至少与我试图遵循的官方惯例不同

如何使用/修改第一个代码块使地图居中（我不想大幅偏离其位置）。

最简单的选择是使两个地图大小相同，并调整Google maps Javascript API v3地图的中心和缩放，直到它与嵌入的地图匹配

代码片段：

函数初始化（）{
var mapCanvas=document.getElementById（'map'）；
变量映射选项={
中心：新google.maps.LatLng（41.28718658156576,12.600134851639705），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（mapCanvas，mapOptions）；
google.maps.event.addListener（map，'center_changed'，function（）{
document.getElementById（'info'）.innerHTML=map.getCenter（）+“：”+map.getZoom（）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）
#地图{
宽度：700px；
高度：700px；
}
虽然geocodezip的答案是正确的，但您可能希望在某些浏览器中进行游戏，并以用户位置为中心。您希望以何种方式和地点为中心通常基于您的用例。不过，它在Firefox和Chrome中运行良好，但Safari似乎需要调整设置以允许跟踪

下面是使用用户位置来设置中心的代码：
<!DOCTYPE html>
<html>
<head>
<style>
  #map {
    width: 700px;
    height: 700px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
    }
    function showPosition(pos) {
       var mapCanvas = document.getElementById('map');
       var mapOptions = {
          center: new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       var map = new google.maps.Map(mapCanvas, mapOptions);
    }
  google.maps.event.addDomListener(window, 'load', getLocation);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>


#地图{
宽度：700px；
高度：700px；
}
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}
}
功能显示位置（pos）{
var mapCanvas=document.getElementById（'map'）；
变量映射选项={
中心：新的google.maps.LatLng（位置坐标纬度，位置坐标经度），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（mapCanvas，mapOptions）；
}
google.maps.event.addDomListener（窗口'load'，getLocation）；
谢谢，但map将始终关注一个国家，而不是动态地基于用户的位置。好的，那么geocode zip的答案应该适合您的用例。您能简要解释一下您添加的事件侦听器在做什么吗？我理解为“当中心改变时，获取中心和缩放信息”。哪个事件侦听器？第一个例子中的那个正是你所说的。这就是我在手动调整地图以匹配嵌入式示例后，如何获得中心和缩放信息来配置地图的方法。