Question

我网站上的Google地图不再显示。我可以看到放大/缩小滑块，地图/卫星按钮等...但地图本身不再显示。我在某处读到地图应该是一个标有“地图”的div标签，其中包含CSS中的高度和宽度。地图始终列出了高度/宽度CSS属性，但ID的标注方式不同。我将ID更改为地图和相应的CSS，但地图仍然不会显示。我在其他地方读到，Google Analytics by Yoast插件也导致了类似的错误。我已经禁用了所有插件，然后我一次重新激活它们，看看是否有另一个插件可能是问题。但是，似乎没有任何插件对地图显示有任何影响。

我是一名具有一些HTML / CSS知识的网页设计师。我设计了这个网站，并聘请了一个人为我编写自定义的Wordpress主题。就像我说的那样，地图显示得很好，但不再存在，我不明白为什么。我真的可以用一些帮助来解决这个问题。我正在尝试更多地了解编码，以便将来我可以自己调试和修复这样的事情。非常感谢一点帮助！

以下是指向包含地图的页面的链接：http://seegerlaw.com/contact-us/

如果您需要我提供任何其他信息，请与我们联系。

Answer 1

您正在使用未记录的字段：

function initialize() {
    geocoder = new google.maps.Geocoder();
    codeAddr(function(lat, lng) {
        myLatlng = new google.maps.LatLng(lat,lng);
        var mapOptions = {
            zoom: 15,
            center: myLatlng,
            disableDefaultUI: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
    });
}

function codeAddr(callback) {
    if (geocoder) {
      geocoder.geocode({ 'address': address }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].geometry);
            maps_lat = results[0].geometry.location["kb"];
            maps_lng = results[0].geometry.location["lb"];
            callback(maps_lat, maps_lng);
         }
         else {
            console.log("Geocoding failed: " + status);
         }
      });
    }
}

使用LatLng的lat()和lng()属性获取其值。

更好的是，只需将LatLng直接从Geocoder传递到MapOptions对象：

codeAddr(function(latLng) {
    var mapOptions = {
        center: latLng,
        ...
    };
    ...
});

callback(results[0].geometry.location);

更好 - 看起来您总是对同一地址进行地理编码 - 只需将LatLng硬编码到您的代码中即可。

Google地图未在网站上显示。控件显示，但地图本身不呈现

1 个答案: