谷歌地圖不顯示在Wordpress頁面

Question

我有一個Wordpress聯繫頁面，我想顯示一個谷歌地圖。我用這個JavaScript中的頭：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=de"></script> 
<script type="text/javascript"> 
var rendererOptions = { draggable: true }; 
var map; 
var start = new google.maps.LatLng(48.100037,11.787567); 
var geocoder = new google.maps.Geocoder(); 

// Initalize your map 
function initialize() { 
    var myOptions = { 
     zoom:zoom, 
     mapTypeId: google.maps.MapTypeId.SATELLITE, 
     center: start 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

// Collect entered data and open Google Maps in a new browser tab 
function showRoute() { 
    var start = document.getElementById("address").value; 
    var dest_url = "http://maps.google.de/maps?saddr="+start+"&daddr="+destination; 
    window.open(dest_url, '_blank'); 
} 
</script> 

<script> 
// Define infobox widget 
function codeAddress() { 
    var address = destination; 
    geocoder.geocode({ 'address': address }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(start); 
     var coordInfoWindow = new google.maps.InfoWindow({ 
     content: "<p style='margin-bottom:5px;padding-bottom:0;'>Geben Sie Ihre Adresse ein und dr&uuml;cken Sie auf 'Start'</p><p style='font-size:12px;color:grey;margin:0 0 15px 0;padding:0;'>Beispiel: Marktplatz 1, 85598 Baldham</p><input id='address' type='textbox' value='' style='border: 1px solid #000; width:230px;'> <input type='button' value='Start' onClick='showRoute();'><br />&nbsp;", 
     map: map, 
     position: start 
     }); 
     } else { 
     alert("Geocode not available: " + status); 
     } 
    }); 
    } 

</script> 

<script> 
// DO NOT CHANGE CODE ABOVE! 

// Change custom parameters starting from here: 
var zoom = 18; // map zoom 
var destination = "Marktplatz 1, 85598 Baldham"; // destination, your address 
document.getElementById('map_canvas').style.width = '710px'; // map width 
document.getElementById('map_canvas').style.height = '600px'; // map height 
initialize(); 
codeAddress(); 
</script> 

在WordPress的頁面，我使用這樣的：

<div id="googlemap"><div id="map_canvas"></div></div> 

不幸的是，地圖沒有顯示，但我不知道爲什麼？

Answer 1

的解決方案非常簡單。位於標題中的javascript嘗試訪問不可用的DOM對象。我在關閉body標籤之前移動了javascript，現在它正在工作。

Answer 2

我不認爲這個問題是在你的谷歌地圖javascript，它適用於我。見fiddle

var rendererOptions = { 
    draggable: true 
}; 
var map; 
var start = new google.maps.LatLng(48.100037, 11.787567); 
var geocoder = new google.maps.Geocoder(); 

// Initalize your map 
function initialize() { 
    var myOptions = { 
     zoom: zoom, 
     mapTypeId: google.maps.MapTypeId.SATELLITE, 
     center: start 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

// Collect entered data and open Google Maps in a new browser tab 
function showRoute() { 
    var start = document.getElementById("address").value; 
    var dest_url = "http://maps.google.de/maps?saddr=" + start + "&daddr=" + destination; 
    window.open(dest_url, '_blank'); 
} 

// Define infobox widget 
function codeAddress() { 
    var address = destination; 
    geocoder.geocode({ 
     'address': address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(start); 
      var coordInfoWindow = new google.maps.InfoWindow({ 
       content: "<p style='margin-bottom:5px;padding-bottom:0;'>Geben Sie Ihre Adresse ein und dr&uuml;cken Sie auf 'Start'</p><p style='font-size:12px;color:grey;margin:0 0 15px 0;padding:0;'>Beispiel: Marktplatz 1, 85598 Baldham</p><input id='address' type='textbox' value='' style='border: 1px solid #000; width:230px;'> <input type='button' value='Start' onClick='showRoute();'><br />&nbsp;", 
       map: map, 
       position: start 
      }); 
     } else { 
      alert("Geocode not available: " + status); 
     } 
    }); 
} 

// DO NOT CHANGE CODE ABOVE! 

// Change custom parameters starting from here: 
var zoom = 18; // map zoom 
var destination = "Marktplatz 1, 85598 Baldham"; // destination, your address 
document.getElementById('map_canvas').style.width = '710px'; // map width 
document.getElementById('map_canvas').style.height = '600px'; // map height 
initialize(); 
codeAddress(); 

一些建議，以檢查

• 檢查調試控制檯JavaScript錯誤阻止谷歌地圖API來執行
• CSS樣式防止地圖上是可見的