title: How to make dynamic markers in google maps with jSON?
body: <p>I am trying to create dynamic markers to load information from my json file. For some reason, the json data never loads. When I try to load one marker, it works fine without the json data. I don't see what the error is. In the console, it says "TypeError: (intermediate value).error is not a function". Here is the code below.</p>
  
  <p><strong>html script link</strong></p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?CLIENT ID HERE 
    &amp;v=3.21&amp;callback=initMap"
      async defer&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>External JS</strong></p>
  
  <pre><code>var map;
  
  function initMap() {
  var myLatlng = {
      lat: -25.363,
      lng: 131.044
  };
  var centerZone = {
      lat: 0,
      lng: 0
  };
  
  
  map = new google.maps.Map(document.getElementById('map'), {
      center: centerZone,
      zoom: 3,
      minZoom: 3
  });
  
  
  $.getJSON('data/data.json', function(data) {
      $.each(data.markers, function(i, value) {
  
          var myLatlng = new google.maps.LatLng(value.lat, value.lon);
          alert(myLatlng);
          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: value.lon
          });
  
      });
  }.error(function(words) {
      alert(words);
  }));
  
  
  var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
  
  /*marker.addListener('click', function() {
      map.setZoom(6);
      map.setCenter(marker.getPosition());
      attachSecretMessage(marker, secretMessages[0]);
    });*/
  
  function attachSecretMessage(marker, secretMessage) {
      var infowindow = new google.maps.InfoWindow({
          content: secretMessage
      });
  
      marker.addListener('click', function() {
          infowindow.open(marker.get('map'), marker);
      });
  }
  
  
  // google.maps.event.addDomListener(window, 'load', initMap);
  }
  </code></pre>
  
  <p><strong>json data</strong></p>
  
  <pre><code>{
  "markers": [
      {
          "id": "1",
          "name": "Mesoamerica",
          "lat": "-25.363",
          "lon": "131.044",
          "zoomLevel": "6"
      }
  ]
  }
  </code></pre>
  
  <p>The json data will have more objects inside, this is just a sample of how I want it.</p>