我正在为一家餐厅创建一个网站,我有自己想要的工作代码。显示地图。在地图下面,我有一个有两个输入的表单。第一个输入允许用户指定他们想要的方向,第二个输入已经填写完毕,设置为餐厅的位置。提交时,方向显示在同一页上。我的问题是,代码在简单的html页面上运行良好,但当我尝试使用编辑页面中的文本选项卡,使用WordPress管理面板将代码添加到页面时,会显示地图,但表单似乎不起作用。
这是工作代码
<div id="map-content">
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBtSeHNLckz6YWwfFcyx4CASiJUN6ohbCk&q=McDonald\'s,Headford,Road,Drive, Thru">
</iframe>
</div>
<div id="map"></div>
<div id="get-directions">
<h2>Get directions:</h2>
<div id="map_directions_controls">
<div class="from">
<label class="address">From: </label><input id="fromAddress" name="from" value="" class="textbox txtMapDirections" type="text">
</div>
<br>
<div class="to">
<label class="address">To: </label><input id="toAddress" name="to" value="" class="textbox txtMapDirections" type="text">
</div>
<br>
<input name="submit" value="Get Directions" onclick="calcRoute(); return false" class="button button_directions" type="submit">
</div>
<div id="map_directions"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var map;
var directionDisplay;
var directionsService;
window.onload = function () {
init();
}
function init() {
var latlng = new google.maps.LatLng(53.279940, -9.049890);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var maptextparam = "<strong>Name</strong><br />Address1, <br />Address2, <br />Address3<br /><br />Tel: 12345678<br />Email: info@website.com";
var maptext = "<div class=\'map_marker\'><strong>Name</strong><br />Address1, <br />Address2, <br />Address3<br /><br />Tel: 12345678<br />Email: info@website.com</div>";
if (maptextparam != \'\') {
var infowindow = new google.maps.InfoWindow({ content: maptext });
var marker = new google.maps.Marker({ position: latlng, map: map, title: maptextparam });
}
var directions = "true";
if (directions == "true") {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("map_directions"));
document.getElementById(\'toAddress\').value = "McDonald\'s Headford Road Drive Thru";
} else {
document.getElementById(\'map_directions_controls\').style.display = \'none\';
document.getElementById(\'map_directions\').style.display = \'none\';
}
}
function calcRoute() {
var start = document.getElementById("fromAddress").value;
var end = document.getElementById("toAddress").value;
if (end == "McDonald\'s Headford Road Drive Thru") {
end = "53.279940, -9.049890";
}
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Please enter a valid input in the \'From\' box");
};
});
}
</script>
</div>