title: Parsing coordinates in json to show on a map?
body: <p>I am trying to use google maps api to show path of a user using a polyline. I am getting the coordinates in json format from a rest api i created. The api is working correctly but the map is not showing the path. Here is the json format </p>
  
  <pre><code>[{"user":"qwerty","latitude":28.648036,"longitude":77.2326533},{"user":"qwerty","latitude":28.646096,"longitude":77.183385},{"user":"qwerty","latitude":28.640015,"longitude":77.168119},{"user":"qwerty","latitude":28.644299,"longitude":77.162207}]
  </code></pre>
  
  <p>and here is the javascript code i am using for the map</p>
  
  <pre><code>&lt;script async defer
          src="https://maps.googleapis.com/maps/api/js?callback=initMap"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
      var username = "&lt;%= session.getAttribute("Member").toString() %&gt;";
  
      var flightPlanCoordinates = [];
        $(document).ready(function(){
             $.ajax({
                 url: "http://127.0.0.1:8082/letstravel/location/"+username,
                 dataType: "json",
                  success: function(data) {
                      for(var i in data){
                          flightPlanCoordinates.push({ lat: data[i].latitude, lng: data[i].longitude });
                      } 
                          }
             });  
        });
  
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });
  
  
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
  
        flightPath.setMap(map);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>flightPlanCoordinates should be in this format :</p>
  
  <pre><code>flightPlanCoordinates = [
      {lat: 37.772, lng: -122.214},
      {lat: 21.291, lng: -157.821},
      {lat: -18.142, lng: 178.431},
      {lat: -27.467, lng: 153.027}
    ];
  </code></pre>
  
  <p>This does not seem to work. I think I am not handling json correctly. Please help.</p>