title: Converting longitude and latitude data from JSON for Google Maps API
body: <p>I've been attempting to dynamically generate a Polyline on an embedded map via Google Maps API based on some data through JSON.</p>
  
  <p>The example Google has given for a static set of coordinates to be passed to their API is:</p>
  
  <pre><code>    var flightPlanCoordinates_static = [
        {lat: 51.470544, lng: -2.588658},
        {lat: 51.867286, lng: -2.238049},
        {lat: 52.531292, lng: -1.899454}
      ];
  </code></pre>
  
  <p>However, I want to dynamically change the coordinates, so created the following Javascript code to read the JSON and, I'd hope, convert it into the correct format of the array to work with the API. However, something must be wrong because the dynamic list doesn't display the line on the map.</p>
  
  <pre><code>    var flightPlanCoordinates_dynamic = [];
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              var myObj = JSON.parse(this.responseText);
              for (var i = 0; i &lt; myObj.lat.length; i++) {
                  flightPlanCoordinates_dynamic[i] = {'lat' : myObj.lat[i], 'lng' : myObj.lng[i]};
              }
  
          }
      };
      xmlhttp.open("GET", "myJSONfile.py", true);
      xmlhttp.send();
  </code></pre>
  
  <p>My JSON output looks like this (and is read by the Javascript without error):</p>
  
  <pre><code>{"lng": [-2.588658, -2.238049, -1.899454], "lat": [51.470544, 51.867286, 52.531292]}
  </code></pre>
  
  <p>If I print both variables to the console, I get similar results but it's clearly different enough for the API to ignore (no error) my dynamically generated content.</p>
  
  <p><a href="https://i.stack.imgur.com/SwiUK.png" rel="nofollow noreferrer">Screenshot of the Console Output</a></p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <p>EDIT:
  Posting entire code, without body HTML tags, in its non-working form:</p>
  
  <pre><code>&lt;style&gt;
    #map {
      height: 70%;
      width: 95%;
    }
  &lt;/style&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script&gt;
    function initMap() {
      var flightPlanCoordinates_dynamic = [];
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              var myObj = JSON.parse(this.responseText);
              for (var i = 0; i &lt; myObj.lat.length; i++) {
                  flightPlanCoordinates_dynamic[i] = {'lat' : myObj.lat[i], 'lng' : myObj.lng[i]};
              }
  
          }
      };
      xmlhttp.open("GET", "myJSONfile.py", true); //returns {"lng": [-2.588658, -2.238049, -1.899454], "lat": [51.470544, 51.867286, 52.531292]}
      xmlhttp.send();
  
      console.log(flightPlanCoordinates_dynamic)
  
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: {51.470544, lng: -2.588658},
        mapTypeId: 'roadmap',
      });
  
      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates_dynamic,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 3
      });
  
      flightPath.setMap(map);
    }
  
  &lt;/script&gt;
  &lt;script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHO9uwpYA-dE57UXC4DWkp52eKDamZBEw&amp;callback=initMap"&gt;
  &lt;/script&gt;
  </code></pre>