Iterating through response data to create google map objects

Question

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!

Justin Hellreich · Accepted Answer · 2017-02-09 02:23:51Z

1

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);
  })
}

answered Feb 9, 2017 at 2:23

Justin Hellreich

5755 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Quesofat Over a year ago

Hmm I'm not sure I explained myself well enough. I'll be more concise. I'm trying to pull out all of the Lat and Lng from the 500 objects and make an array of 500 instances of new google.maps.LatLng(Latitude, Longitude) like googe's documentation here --> developers.google.com/maps/documentation/javascript/examples/…

Justin Hellreich Over a year ago

In that case, the above should do it. For each element of the objects array, the lat/lng are pulled out and a new Google Maps object is created. They are all mapped into an array and returned.

Quesofat Over a year ago

Nvm I didn't see what you did there.

Justin Hellreich Over a year ago

You can read about map a little more here. Good luck!

Collectives™ on Stack Overflow

Iterating through response data to create google map objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related