CODEWITHSUNDEEP
javascriptjqueryarraysjsongoogle-maps
Quesofat
Quesofat

Reputation: 1531

Iterating through response data to create google map objects

I have data like this: 

 "meta":{"About thisdata"}, "objects": [{"beat": "1614", "block": "081XX W HIGGINS RD", "case_number": "JA100466", "classification": "/api/1.0-beta3/crimeclassification/83/", "community_area": "/api/1.0-beta3/communityarea/10/", "community_name": "Norwood Park", "community_number": 10, "community_slug": "norwood-park", "crime_date": "2016-12-30T18:00:00", "description": "$500 AND UNDER", "domestic": false, "fbi_code": "06", "id": "10801504", "iucr": "0820", "latitude": 41.985421498, "location_description": "STREET", "longitude": -87.829756604, "primary_type": "THEFT", "ward": 41, "year": 2016},

In total this will have 500 objects under "objects"

I am trying to create 500 of these: new google.maps.LatLng(37.782551, -122.445368)

to put in an array like this: 

function getPoints() {
        return [
          new google.maps.LatLng(37.782551, -122.445368),
          new google.maps.LatLng(37.782745, -122.444586),
          new google.maps.LatLng(37.782842, -122.443688)

         ]
}

to be returned here: 

function initMap () {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 41.881, lng: -87.629 },
    zoom: 12,
    mapTypeId: 'satellite'
  });

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: makeMarkers(), <-- Here
    map: map
  });
}

The code I have tried look like this: 

var makeMarkers = function () {
  var result = [];
  var lat, lng = [];
  resp.objects.forEach(function(objects) { 
  lat.objects.latitude;
  lng = objects.longitude;
  return [new google.maps.LatLng(lat, lng)]
})
}

but instead of returning an array of new objects, it returns 500 new arrays with one google object because it's inside the forEach. I'm not sure how to get what I'm looking for. I struggle a fair amount with scopes and iterating through data.

Thank you!

Upvotes: 0

Views: 152

Answers (1)

Justin Hellreich
Justin Hellreich

Reputation: 575

I'll assume the resp object is the object at the top of your post. First of all, you'll want to use map on the array to actually get an array back.

Map

Map works similar to forEach since it acts on every element in the array. The difference is that within the callback to map you return an updated element.

Ex:

[1, 2, 3, 4].map(function (element) {
  return element * 2
}

The above with return an array as follows: [2, 4, 6, 8]. Note the return within the callback method.

For your case

You want to get the array of objects from your resp and map each of those elements to the Google Maps object (i.e. google.maps.LatLng(lat, lng))

If I understand correctly what you are trying to do, the following should work. I'd suggest playing around with more simple examples of map (also filter,forEach, and reduce (foldr in some languages) are good to know).

var makeMarkers = function () {
  var result = [];
  var lat, lng = [];
  return resp.objects.map(function(element) {
    lat = element.latitude;
    lng = element.longitude;
    return new google.maps.LatLng(lat, lng);
  })
}

Upvotes: 1

Related Questions