Difficulty Getting a Custom Google Map with Customer Markers and Infowindows to Display on WordPress Website

So, thanks to this website, I’ve been able to put together a code for a Google Map that will display multiple custom markers and multiple infowindows (each with unique text). My issue is that it works perfectly in JSFiddle but when I attempt to put it on my WordPress website, it just displays a blank space where the map should have loaded. Any assistance would be greatly appreciated, as I’m hoping to make a fairly easy template for others to use when taking on similar projects. (Also, I’m aware that I didn’t include an Google API key below. I have it in my original text and it still wasn’t displaying on the website.)

Here is what the text looks like in JSFiddle:

var map;
var infowindow;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(30.2685961, -98.8715375),
    mapTypeId: 'roadmap'
  });

  infowindow = new google.maps.InfoWindow();
  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  var icons = {
    001: {
      icon: iconBase + 'dining.png'
    },
    002: {
      icon: iconBase + 'parks.png'
    }
  };
  
  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map,

    });
    
    var content = "" + feature.title
    google.maps.event.addListener(marker, 'click', (function(marker, 
    content, infowindow) {
      return function(evt) {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      };
    })(marker, content, infowindow));

  }

  var features = [{
    position: new google.maps.LatLng(30.2782239, -98.8782511),
    type: 001,
    title:'<h1 id="firstHeading" class="firstHeading">Hondos on Main</h1> 
    Price- $$ <br> Type- American Comfort <br> Atmosphere- Laid-back <br> <a 
    href="http://www.hondosonmain.com">'+'Website</a>'
  }, {
    position: new google.maps.LatLng(30.2766067, -98.8770821),
    type: 001,
    title:'<h1 id="firstHeading" class="firstHeading">Old German Bakery and 
    Restaurant</h1> Price- $$ <br> Type- German, American <br> Atmosphere- 
    Casual <br> <a href="http://oldgermanbakeryandrestaurant.com">'+
    'Website</a>'
  }, {
    position: new google.maps.LatLng(30.2735382, -98.8717627),
    type: 001,
    title:'<h1 id="firstHeading" class="firstHeading">Vaudville</h1> Price- 
    $$$ <br> Type- French, American <br> Atmosphere- Upscale <br> 
    <ahref="https://vaudeville-living.com">'+'Website</a>'
  }, {
    position: new google.maps.LatLng(30.2431689, -98.9015112),
    type: 001,
    title:'<h1 id="firstHeading" class="firstHeading">Cabernet Grill</h1> 
    Price- $$$ <br> Type- Steakhouse, Seafood <br> Atmosphere- Upscale <br> 
    <a href="http://www.cabernetgrill.com/">'+'Website</a>'
  }, {
    position: new google.maps.LatLng(30.102755, -98.8212992),
    type: 002,
    title:'<h1 id="firstHeading" class="firstHeading">Old Tunnel </h1> 
    Price- $ <br> Views- 4 <br> Difficulty- 2 <br> <a href=
    "http://tpwd.texas.gov/state-parks/old-tunnel">'+'Website</a>'
  }, {
    position: new google.maps.LatLng(30.2373951, -98.6313944),
    type: 002,
    title:'<h1 id="firstHeading" class="firstHeading">Lyndon B. Johnson 
    State Park</h1> Price- $ <br> Views- 7 <br> Difficulty- 1 <br> <a href= 
    "http://tpwd.texas.gov/state-parks/lyndon-b-johnson">'+'Website</a>'  
  }, {
    position: new google.maps.LatLng(30.5061346, -98.8244414),
    type: 002,
    title: '<h1 id="firstHeading" class="firstHeading">Enchanted Rock</h1> 
    Price- $ <br> Views- 9 <br> Difficulty- 6 <br> <a 
    href="http://tpwd.texas.gov/state-parks/enchanted-rock">'+'Website</a>'
  }];

  for (var i = 0, feature; feature = features[i]; i++) {
    addMarker(feature);
  };
}
google.maps.event.addDomListener(window, "load", initialize);
#map, html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback
=initMap">
</script>

Here is what the code looks like when I insert it in the “Text” part of the post on my WordPress page:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #map, html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
      var map;
      var infowindow;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: new google.maps.LatLng(30.2685961, -98.8715375),
          mapTypeId: 'roadmap'
        });

        infowindow = new google.maps.InfoWindow();
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          001: {
            icon: iconBase + 'dining.png'
          },
          002: {
            icon: iconBase + 'parks.png'
          }
        };
  
        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map,

          });
    
          var content = "" + feature.title
          google.maps.event.addListener(marker, 'click', (function(marker, 
          content, infowindow) {
            return function(evt) {
              infowindow.setContent(content);
              infowindow.open(map, marker);
            };
          })(marker, content, infowindow));

        }

        var features = [{
          position: new google.maps.LatLng(30.2782239, -98.8782511),
          type: 001,
          title:'<h1 id="firstHeading" class="firstHeading">Hondos on 
          Main</h1> Price- $$ <br> Type- American Comfort <br> Atmosphere- 
          Laid-back <br> <a href="http://www.hondosonmain.com">'+
          'Website</a>'
        }, {
          position: new google.maps.LatLng(30.2766067, -98.8770821),
          type: 001,
          title:'<h1 id="firstHeading" class="firstHeading">Old German 
          Bakery and Restaurant</h1> Price- $$ <br> Type- German, American 
          <br> Atmosphere- Casual <br>
          <a href="http://oldgermanbakeryandrestaurant.com">'+'Website</a>'
        }, {
          position: new google.maps.LatLng(30.2735382, -98.8717627),
          type: 001,
          title:'<h1 id="firstHeading" class="firstHeading">Vaudville</h1> 
          Price- $$$ <br> Type- French, American <br> Atmosphere- Upscale 
          <br> <a href="https://vaudeville-living.com">'+'Website</a>'
        }, {
          position: new google.maps.LatLng(30.2431689, -98.9015112),
          type: 001,
          title:'<h1 id="firstHeading" class="firstHeading">Cabernet 
          Grill</h1> Price- $$$ <br> Type- Steakhouse, Seafood <br> 
          Atmosphere- Upscale <br> <a href=
          "http://www.cabernetgrill.com/">'+'Website</a>'
        }, {
          position: new google.maps.LatLng(30.102755, -98.8212992),
          type: 002,
          title:'<h1 id="firstHeading" class="firstHeading">Old Tunnel </h1> 
          Price- $ <br> Views- 4 <br> Difficulty- 2 <br> <a 
          href="http://tpwd.texas.gov/state-parks/oldtunnel">'+'Website</a>'
        }, {
          position: new google.maps.LatLng(30.2373951, -98.6313944),
          type: 002,
          title:'<h1 id="firstHeading" class="firstHeading">Lyndon B. 
          Johnson State Park</h1> Price- $ <br> Views- 7 <br> Difficulty- 1 
          <br> <a href="http://tpwd.texas.gov/state-parks/lyndon-b-johnson">
          '+'Website</a>'  
        }, {
          position: new google.maps.LatLng(30.5061346, -98.8244414),
          type: 002,
          title: '<h1 id="firstHeading" class="firstHeading">Enchanted 
          Rock</h1> Price- $ <br> Views- 9 <br> Difficulty- 6 <br> <a 
          href="http://tpwd.texas.gov/state-parks/enchanted-rock">'+
          'Website</a>'
        }];

        for (var i = 0, feature; feature = features[i]; i++) {
          addMarker(feature);
        };
      }
      google.maps.event.addDomListener(window, "load", initialize);
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback
    =initMap">
    </script>
  </body>
</html>

Thank you for your consideration and any help or suggestions.

Read more here: Difficulty Getting a Custom Google Map with Customer Markers and Infowindows to Display on WordPress Website

Leave a Reply

Your email address will not be published. Required fields are marked *