向Wordpress添加工作Javascript谷歌地图代码 - Adding A Working Javascript Google Maps Code to Wordpress

我已经看了所有关于这方面的帖子，但没有一篇完全解决我的问题。请帮忙！

我有一个工作的Javascript代码，我想插入到我的网站使用Wordpress。我考虑了很多不同的事情，但似乎无法找到正确的解决方案。我是否使用自定义字段？我会把它发布到博客中并插入我的主页吗？

我的代码：

 <!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {height: 100%; 
    margin: 1;
        padding: 1;
      }
      #map {
        height: 80%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: 2, lng: 1.5}
  });
  setMarkers(map);
}
var markers = [
  ['Seoul, South Korea', 37.5667, 126.9667],
  ['Pokhara, Nepal', 28.2639, 83.9722],
  ['Kunming, China', 25.0667, 102.6833],
  ['Busan, South Korea', 35.1667, 129.0667],
  ['Gwangju, South Korea', 35.1667, 126.9167],
  ['Geoje, South Korea', 34.8500, 128.5833],
  ['Toronto, Canada', 43.7000, -79.4000],
  ['Niagara Falls, Canada', 43.1167, -79.0667],
  ['Kitchener, Canada', 43.4500, -80.4833],
  ['Kathmandu, Nepal', 27.7000, 85.3333]
];
var content = ['<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Seoul, South Korea</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Seoul</b> is the capital of South Korea.' +
      '<br></br><b>Adventure: </b><a href=http://mikenatalieworldwide.com/2015/06/15/hiking-korea-achasan-seoul/>Achasan Mountain</a>", '+
      '<a href=http://mikenatalieworldwide.com/2015/06/04/hiking-korea-gwanaksan-seoul/>Gwanaksan Mountain</a>, '+
  '<br></br><b>Festivals: </b>'+
  '<br></br><b>Food: </b>'+
  '<br></br><b>Places to Stay: </b>'+
  '<br></br><b>Shopping: </b><a href=http://mikenatalieworldwide.com/2015/05/05/around-seoul-namsan-tower/>Namsan Tower</a>, '+
  '<br></br><b>Sightseeing: </b><a href=http://mikenatalieworldwide.com/2015/06/25/around-seoul-jamsil-lotte-world-tower/>Jamsil Lotte World Tower</a>, '+
  '</div>',
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>', 
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>', 
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>', 
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>', 
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>',
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>', 
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>', 
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>', 
'<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h3 id="firstHeading" class="firstHeading">Pokhara, Nepal</h3>'+
      '<div id="bodyContent">'+
      '<p><b>Pokhara</b> is a lake-side city in Nepal.' +
      '<br></br><b>Adventure: </b>, '+
      '<br></br><b>Festivals: </b>'+
      '<br></br><b>Food: </b>'+
      '<br></br><b>Places to Stay: </b>'+
      '<br></br><b>Shopping: </b>'+
      '<br></br><b>Sightseeing: </b>'+
      '</div>'
];
function setMarkers(map) {
  // Adds markers to the map.
  for (var i = 0; i < content.length; i++) {
    var marker = markers[i];
    var marker = new google.maps.Marker({
      position: {lat: marker[1], lng: marker[2]},
      map: map,
      title: marker[0]
    });
   attachContent(marker, content[i]);
  }
}
function attachContent(marker, content) {
  var infowindow = new google.maps.InfoWindow({
    content: content
  });
  marker.addListener('click', function() {
    infowindow.open(marker.get('map'), marker);
  });
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>
</body>
</html>

如有任何帮助，我们将不胜感激！或者对我来说是一个正确的方向。我不知疲倦地在谷歌上搜索了这个，但就是想不出来。

谢谢！Mike

任务可以通过两种不同的方式完成

1）创建自定义页面模板并将其分配给特定页面，然后将脚本排入该页面

2）为地图创建一个简短的代码。

我更喜欢第二个选项，因为你可以在任何地方粘贴短代码，所以按照下面的步骤创建短代码

a）添加短代码

add_shortcode('custom-map-shortcode','custom_map_shortcode_callback'));
function custom_map_shortcode_callback(){
   return '<div id="map"></div>';
}

b）把你所有的js代码放在一个文件中，比如说它是map_script.js，然后把它放在所在的页面上

add_action( 'wp_enqueue_scripts', 'enqueue_map_script' );
function enqueue_map_script(){
  global $post;
  if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-map-shortcode') ) {
      wp_enqueue_script( 'map-script', get_template_directory_uri() . '/js/map_script.js');
   }
}

在function.php中添加所有这些代码，然后可以在任何显示地图的地方使用shortcode作为[自定义地图shortcode]。