我一直在使用这段代码，并且在localhost中运行正常，但是当我尝试将其放入word时按下地图不会出现，我不知道如何解决我在WordPress中的新问题。
非常需要亲自动手，谢谢
var geocoder;
function initMap() {
GeolocateUser();
var enderesso, Dest_location;
var UserLocation;
var markers = [];
var origin_place_id = null;
var destination_place_id = null;
var travel_mode = google.maps.TravelMode.DRIVING;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
zoom: 13
});
geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
});
directionsDisplay.setMap(map);
var origin_input = document.getElementById('origin-input');
var destination_input = document.getElementById('destination-input');
var total_distance = document.getElementById('total-distance');
var total_duration = document.getElementById('total-duration');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(origin_input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(destination_input);
var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
origin_autocomplete.bindTo('bounds', map);
var destination_autocomplete = new google.maps.places.Autocomplete(destination_input);
destination_autocomplete.bindTo('bounds', map);
// On Change route action
directionsDisplay.addListener('directions_changed', function(){
total_distance.value = getDistance(directionsDisplay.getDirections());
total_duration.value = getDuration(directionsDisplay.getDirections());
});
// On click map action
map.addListener('click',function(e){
clearMarkers();
if (!UserLocation) {
UserLocation=e.latLng;
addMarker(e.latLng);
route();
}else{
Dest_location=e.latLng;
route();
}
});
origin_autocomplete.addListener('place_changed', function() {
var place = origin_autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
clearMarkers();
expandViewportToFitPlace(map, place);
// If the place has a geometry, store its place ID and route if we have
// the other place ID
origin_place_id = place.place_id;
UserLocation = place.geometry.location;
addMarker(UserLocation);
route();
});
destination_autocomplete.addListener('place_changed', function() {
var place = destination_autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
expandViewportToFitPlace(map, place);
clearMarkers();
// If the place has a geometry, store its place ID and route if we have
// the other place ID
Dest_location = place.geometry.location;
destination_place_id = place.place_id;
route();
});
function route() {
if (!UserLocation || !Dest_location) {
return;
}
clearMarkers();
directionsService.route({
origin: UserLocation ,
destination: Dest_location,
travelMode: travel_mode
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position:location,
map: map
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
//Get Distance
function getDistance(result){
var d = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
d += myroute.legs[i].distance.value;
}
d=(d/1000);
return d;
}
//Get duration
function getDuration(result){
var time = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
time += myroute.legs[i].duration.value;
}
time =(time/60)+10;
time = time.toFixed(0);
return time;
}
//Get full adress
function getAddress(latLng) {
var edress;
geocoder.geocode( {'latLng': latLng},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
if(results[0]) {
adress = results[0].formatted_address;
}
else {
adress = "No results";
}
}
else {
adress = status;
}
});
return adress;
}
//Geolocate User
function GeolocateUser(){
UserLocation = new google.maps.LatLng(0.0,0.0);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
UserLocation = new google.maps.LatLng(position.coords.latitude+0, position.coords.longitude+0);
addMarker(UserLocation);
map.setCenter(UserLocation);
});
}
}
//View Point Simple
function expandViewportToFitPlace(map, place) {
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(11);
}
}
}<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#origin-input,
#destination-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 200px;
}
#origin-input:focus,
#destination-input:focus {
border-color: #4d90fe;
}
#mode-selector {
color: #fff;
background-color: #4d90fe;
margin-left: 12px;
padding: 5px 11px 0px 11px;
}
#mode-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<input id="origin-input" class="controls" type="text"
placeholder="Enter an origin location">
<input id="destination-input" class="controls" type="text"
>
<input type="text" id="total-distance" placeholder="Calculating.."/>
<input type="text" id="total-duration" placeholder="Calculating.."/>
<div id="map"></div>
<script src="main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap" async defer></script>
</html>