title: Iterating through JSON to populate map
body: <p>I am trying to iterate through a JSON file and put relevant data inside my markers variable. through each iteration markers should change, however I am stuck. Does anyone know how to do this or how I could?</p>
  <p><strong>This is a smaller version of my JSON:</strong></p>
  <pre><code>{&quot;properties&quot;: 
  [{&quot;latitude&quot;:&quot;53.542637347578406&quot;,&quot;longitude&quot;:&quot;-113.51709427725768&quot;,
  &quot;account&quot;:&quot;1061985&quot;,&quot;value&quot;:&quot;$500&quot;},
  {&quot;latitude&quot;:&quot;53.5384925504052&quot;,&quot;longitude&quot;:&quot;-113.520385218556&quot;,
  &quot;account&quot;:&quot;1248558&quot;,&quot;value&quot;:&quot;$500&quot;}]}
  </code></pre>
  <p><strong>This is my JavaScript Code:</strong></p>
  <pre><code>function initMap() {
      map = new google.maps.Map(document.getElementById(&quot;map&quot;), {
          mapId: &quot;8e0a97af9386fef&quot;,
          center: {lat: 53.55204130841203, lng: -113.49684664653883},
          zoom: 11,
          mapTypeControl: false,
      });
      const markers = [
          [
              &quot;Assessed&quot;,
              53.432556261744296,
              -113.61359034412152,
              &quot;house-svgrepo-com.svg&quot;,
              40,
              41
          ]
      ];
      for (let i = 0; i &lt; markers.length; i++) {
          const currMarker = markers[i];
          const marker = new google.maps.Marker({
              position: {lat: currMarker[1], lng: currMarker[2]},
              map,
              title: currMarker[0],
              icon: {
                  url: currMarker[3],
                  scaledSize: new google.maps.Size(currMarker[4], currMarker[5])
  
              },
  //            animation: google.maps.Animation.DROP
          });
      }
  }
  </code></pre>
  <p>What im trying to do here is populate <code>const markers</code> with latitude, longitude, and assessed value from the JSON.
  So: &quot;Assessed&quot; will turn into JSON &quot;value&quot;</p>
  <p><strong>This is the HTML file:</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Edmonton Property Assessments&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Map View&lt;/h1&gt;
        &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
        &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
        &lt;script
            async
            src=&quot;https://maps.googleapis.com/maps/api/js?key=UR_KEY&amp;callback=initMap&quot;&gt;   
        &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>