我的谷歌地图并不总是显示

Question

在我网站的联系页面上，我在后台有一张Google地图。问题是它并不总是显示或部分显示。如果您直接转到联系页面（http://jimmyhoule.net/index.html#contact），地图就可以了，但如果您先转到任何其他页面（例如http://jimmyhoule.net/index.html），请点击＆＃34;联系＆＃ 34;在左侧菜单中，地图将不会出现或部分位于菜单栏附近。

这是我对地图的代码：

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
// The latitude and longitude of your business / place
var position = [46.13828143498409, -72.71355827100831];
function showGoogleMaps() {
    var latLng = new google.maps.LatLng(position[0], position[1]);
    var mapOptions = {
        zoom: 12, // initialize zoom level - the max value is 21
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: false, // allow users to zoom the Google Map
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latLng,
        scrollwheel: false,
        mapTypeControl: false,
        styles : [{featureType:'all',stylers:[{saturation:-100},{gamma:0.0}]}]
    };
    map = new google.maps.Map(document.getElementById('googlemaps'),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>

我在Firefox和Chrome上都存在这个问题（在其他浏览器上没有测试过）。

Answer 1

当用户导航到联系人页面时，尝试直接调用showGoogleMaps功能。

Answer 2

那不是另一页。您只需在URL中添加哈希值即可。您的页面在加载时正在测试哈希值，但是在您点击链接之前发生这种情况时哈希值不存在，因此当您的页面加载时没有哈希值时，id='googlemaps'未达到完整大小的元素大小。确保您的googlemaps元素为完整尺寸，然后在添加哈希值时点击事件调用showGoogleMaps()，并在页面加载时调用if(location.hash.replace('#', '').match(/contact/i))。