Question

我有一个Wordpress联系页面，我想在其中显示Google地图。我在标题中使用了这个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

我不认为问题出在您的Google地图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错误，导致google maps api无法执行
Css样式阻止地图可见

Answer 2

解决方案非常简单。 javascript位于标题中，尝试访问不可用的DOM对象。我在关闭的body标签之前移动了javascript，它现在正在运行。

Word Map页面上未显示Google Map

2 个答案: