谷歌在Wordpress页面上映射JavaScript v3

我正试图进入我的Wordpress网站的一个页面。正如您所看到的，它们以JavaScript或JavaScript+HTML的形式为您提供代码

---

现在，我对编码不是很在行，所以我不太确定如何让这段代码成为我网站上的地图。我试图寻找答案，但我所发现的只是让我更加困惑。有什么建议吗？

根据给定的示例，您必须在页面中插入HTML代码：

<div id="map-canvas" style="float:left;width:200px; height:200px"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;

var australia = new google.maps.LatLng(-25.274398, 133.775136);

function initialize() {

  var mapOptions = {
    zoom: 7,
    center: australia
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  calcRoute();
}

function calcRoute() {

  var request = {
    origin: 'Sydney, NSW',
    destination: 'Sydney, NSW',
    waypoints:[{location: 'Bourke, NSW'}, {location: 'Broken Hill, NSW'}],
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000.0;
  document.getElementById('total').innerHTML = total + ' km';
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

var renderoptions={
德拉格布尔：是的
};
var directionsDisplay=new google.maps.directionsrender（rendererOptions）；；
var directionsService=new google.maps.directionsService（）；
var映射；
var australia=new google.maps.LatLng（-25.274398133.775136）；
函数初始化（）{
变量映射选项={
缩放：7，
中心：澳大利亚
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'directionsPanel'）；
google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
ComputeTotalInstance（directionsDisplay.getDirections（））；
});
calcRoute（）；
}
函数calcRoute（）{
var请求={
来源：“新南威尔士州悉尼”，
目的地：“新南威尔士州悉尼”，
航路点：[{地点：'新南威尔士州伯克'}，{地点：'新南威尔士州布罗克山'}]，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
函数ComputeTotalInstance（结果）{
var合计=0；
var myroute=result.routes[0]；
对于（var i=0；i

我向您推荐的“入门”页面对您有帮助吗？您好。我试过了，谢谢你的建议。但是它是为熟悉JavaScrip的人设计的，所以我不太理解它。我也尝试了

，但没有任何运气。我认为最好开始一个新的帖子，因为这是一个与上一个稍有不同的问题。我的意思是，你帮我找到了一张适合我的地图，现在我只需要把它放到我的网站上；）实际上，你不必详细了解每件事。有时候，复制代码，然后通过更改某些特性来探索代码已经很有帮助了。你至少试过了吗？是的，我试过了。我将示例中的代码复制到了中，但到目前为止，我还没有从中获得任何信息。不过我还在努力，所以也许我会成功。看起来你还没有创建谷歌地图API密钥。您需要一个单独的API密钥才能在页面上使用谷歌地图。有关更多信息，请参阅。您可以使用您的Google帐户创建API密钥。或者您已经创建了密钥吗？那么你可能需要为你的网页启用它。谢谢你在这里仍然帮助我。我创建了一个并复制了您的代码没有，但是页面还没有显示任何内容。百分比大小有问题，您需要确保层次结构中的某个地方有一个大小。在任何情况下，如果您没有正确地在上包含脚本，请查看该页面的源代码。对不起，我没有太多的编码经验。我刚刚将代码复制到Wordpress中测试页面的文本编辑器中。我应该如何包含脚本？感谢@geocodezip提供的大小百分比提示。我刚换了。