Google Maps API 未将标记居中答案

【问题标题】：Google Maps API not centering the MarkerGoogle Maps API 未将标记居中
【发布时间】：2017-02-27 15:04:18
【问题描述】：

我在一个基于地址设置标记的网站上有 Google 地图。

这是一个示例（单击位置选项卡）：http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/

如您所见，地图上没有标记。但是，如果您向上滚动，标记就在视线之外。

我的代码有问题吗？奇怪的是，很少有地址能正确显示，但大多数地址不能正确显示。我的代码有问题还是 Google 有问题？

这是我的 JavaScript 代码：

<script type="text/javascript">
$(document).ready(function(){
    load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
});
</script>

function load(title, address, type) {
    if (GBrowserIsCompatible()) {
        var map;
        var geocoder;

        map_id = document.getElementById("map");
        map = new GMap2(map_id);
        map.addControl(new GSmallMapControl());
        map.setCenter(new GLatLng(24, 0), 17);
        map.enableDoubleClickZoom();

        if (type == 'sat') {
            map.setMapType(G_SATELLITE_MAP);
            map.addControl(new GHierarchicalMapTypeControl());
        } else {
            map.setMapType(G_NORMAL_MAP);
        }

        geocoder = new GClientGeocoder();
        geocoder.getLocations(address, function (response) {
            map.clearOverlays();
            if (!response || response.Status.code != 200) {
                //map_id.innerHTML('Could not find address on Google Maps');
            } else {
                place = response.Placemark[0];
                point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);

                map.setCenter(point, 17);

                // Create our "tiny" marker icon
                var icon = new GIcon();
                icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
                icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
                icon.iconSize = new GSize(12, 20);
                icon.shadowSize = new GSize(22, 20);
                icon.iconAnchor = new GPoint(6, 20);
                icon.infoWindowAnchor = new GPoint(5, 1);

                // Creates one of our tiny markers at the given point
                function createMarker(point, index) {
                  var marker = new GMarker(point, icon);
                  var myMarkerContent = "<div style=\"width:200px; overflow:auto;\"><strong>" + title + "</strong><br />" + address + "</div>";
                  map.addOverlay(marker);
                  marker.openInfoWindowHtml(myMarkerContent);
                  GEvent.addListener(marker,"click",function() {
                     marker.openInfoWindowHtml(myMarkerContent);
                   });
                }
                createMarker(point);
            }
        });
    }
}

【问题讨论】：

我在地图中心看到一个带标签的标记...不是在屏幕外？

标签： google-maps

【解决方案1】：

如果您在谷歌地图中加载页面，然后单击“链接”功能，它会为您提供将网站嵌入 iFrame 的代码，而不是乱用 API - 您可以试试这个吗？

还有一个错误，有时标记不居中，特别是在隐藏的 div 上。我最好的解决方法是将谷歌地图的 iFrame 放在一个单独的文件中（例如 pages/map.html），然后将其作为页面中 iFrame 的来源。

例如-而不是 iFrame src="maps.google.com/ etc etc" 将其设置为 src="pages/map.html"

无论如何，这篇文章已经 6 个月了，但迟到总比没有好！

【讨论】：

【解决方案2】：

对我来说，问题是加载地图时 iframe 的大小为 0（显示：隐藏）。我添加了延迟来加载地图之后 iframe 被加载。这种竞争条件可以解释为什么某些地址正确呈现。

也许试试这个：

<script type="text/javascript">
  $(document).ready(function(){
    setTimeout("delayedLoad()",100);
  });
  function delayedLoad() {
    load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
  }
</script>

（感谢https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ）

【讨论】：