title: Unable to use marker.setPosition and map.panTo in WordPress template
body: <p>I've been trying to modify a Google Maps implementation in a WordPress template, where instead of a single map with marker (that works), a user can select a location from a list. The click event should then move the marker, center the map, and ideally set a new zoom level. I've muddled along for hours, but my lack of Javascript knowledge is getting in the way.</p>
  
  <p>I've made a <a href="https://jsfiddle.net/kwxazdgp/5/" rel="nofollow">JSFiddle</a> of it, in case that's useful.</p>
  
  <p>Sincerely hoping someone is willing to assist. Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function pan(latlon) {
      var coords = latlon.split(",");
      var panPoint = new google.maps.LatLng(coords[0], coords[1]);
  
    marker.setPosition( panPoint );
      map.panTo(panPoint);
  //  map.setZoom(3);  // This would have to be dynamic, based on data-zoom
  }
  
  google_api_map_init_259585579();
  function google_api_map_init_259585579(){
  var map;
  var coordData = new google.maps.LatLng(parseFloat(3.165612), parseFloat(101.6504025));
  var marker;
  
  var styleArray = [
      {
          "featureType": "landscape",
          "stylers": [
              {
                  "saturation": -100
              },
              {
                  "lightness": 65
              },
              {
                  "visibility": "on"
              }
          ]
      },
      {
          "featureType": "poi",
          "stylers": [
              {
                  "saturation": -100
              },
              {
                  "lightness": 51
              },
              {
                  "visibility": "simplified"
              }
          ]
      },
      {
          "featureType": "road.highway",
          "stylers": [
              {
                  "saturation": -100
              },
              {
                  "visibility": "simplified"
              }
          ]
      },
      {
          "featureType": "road.arterial",
          "stylers": [
              {
                  "saturation": -100
              },
              {
                  "lightness": 30
              },
              {
                  "visibility": "on"
              }
          ]
      },
      {
          "featureType": "road.local",
          "stylers": [
              {
                  "saturation": -100
              },
              {
                  "lightness": 40
              },
              {
                  "visibility": "on"
              }
          ]
      },
      {
          "featureType": "transit",
          "stylers": [
              {
                  "saturation": -100
              },
              {
                  "visibility": "simplified"
              }
          ]
      },
      {
          "featureType": "administrative.province",
          "stylers": [
              {
                  "visibility": "off"
              }
          ]
      },
      {
          "featureType": "water",
          "elementType": "labels",
          "stylers": [
              {
                  "visibility": "on"
              },
              {
                  "lightness": -25
              },
              {
                  "saturation": -100
              }
          ]
      },
      {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [
              {
                  "hue": "#ffff00"
              },
              {
                  "lightness": -25
              },
              {
                  "saturation": -97
              }
          ]
      }
  ]
  
  function initialize() {
      var mapOptions = {
         zoom: 5,
         center: coordData,
         scrollwheel: false,
                     styles: styleArray 
        }
      var map = new google.maps.Map(document.getElementById("map-canvas-259585579"), mapOptions);
  
      var markerIcon = { 
                     url: "http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png", 
                     size: new google.maps.Size(72, 74), 
                     origin: new google.maps.Point(0,0), 
                     anchor: new google.maps.Point(30, 74) 
                 };
  
  
        marker = new google.maps.Marker({
         map:map,
         draggable:false,
         position: coordData,
         icon: markerIcon
        });
  
      $('.location').on('click', function () {
          pan($(this).data('coords'));
          $( "#location-output" ).text($(this).data('location'));
      });
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, #map-canvas-259585579 {
    height: 570px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src='//maps.googleapis.com/maps/api/js?v=3.exp&amp;#038;sensor=false&amp;#038;ver=4.4.2'&gt;&lt;/script&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a class="location" data-zoom="5" data-coords="3.1656120,101.6504025" data-location="Kuala Lumpur"&gt;Malaysia&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="location" data-zoom="12" data-coords="-6.2257931,106.8059866" data-location="Jakarta"&gt;Indonesia&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="location" data-zoom="8" data-coords="25.1951156,55.2747310" data-location="Dubai"&gt;United Arab Emirates (UAE)&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="location-output"&gt;&lt;/div&gt;
  
  &lt;div class="google-map-api map-1"&gt;
    &lt;div id="map-canvas-259585579" class="gmap"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>