Question

I don't know how to do this step.Can somebody show me how it looks like?
Step:The markers are created on line 74; you need to update that code to use the latitude and longitude from each record's "location" object (e.g., location.latitude)

Note: the Google Maps API needs a number, but the library data is a string; we can convert a string to a number by using the "parseFloat" function, e.g., parseFloat (string)

Check your JS console for errors, and verify that you can see markers in Chicago. (We'll deal with center the map later.)

Answer 1

My code:
$(document).ready(function () {
getLibraryData();
});


function getLibraryData() {
var endpointUrl = " https://data.cityofchicago.org/resource/x8fc-8rcq.json ";

var queryString = "";

var dataUrl = endpointUrl + queryString;

console.log(dataUrl);

var jqxhr = $.get(dataUrl)
.done(function(data) {
console.log(data);
drawMap(data); // if we get data back, draw the map

})
.fail(function() {
// if the request fails
alert( "error" );
})
.always(function() {
// upon completion, whether success or fail
});


}


function drawMap(data) {

// define the center and create the map

var map = new google.maps.Map(document.getElementById('divMap'), {
zoom: 4,
center: {lat: 41.8333925, lng: -88.0123393}
});

// for each library record, create a marker and an info window

$.each(data, function (i, entry) {
var contentString = data[i]name_
+ "<br>"
+ data[i].address
+"<br>"
+ data[i].city
+"<br>"
+ data[i].state
"<br>"
+ data[i].zip
"<br>"
+ data[i].phone
"<br>"
+ data[i].hours_of_operation
"<br>"
+ data[i].website.url
+ "<hr>";
});
// create the content for the info window and store in a string var


// create the info window, using the content string
var infowindow = new google.maps.InfoWindow({
content: contentString
});

// create the marker
var marker = new google.maps.Marker({
position: {parseFloat(location.longitude,location.latitude)}
map: map,
title: 'Uluru (Ayers Rock)'
});

// create the click event handler for the marker
marker.addListener('click', function() {
infowindow.open(map, marker);
});

});


}

Answer 2

My code:
$(document).ready(function () {
getLibraryData();
});


function getLibraryData() {
var endpointUrl = " https://data.cityofchicago.org/resource/x8fc-8rcq.json ";

var queryString = "";

var dataUrl = endpointUrl + queryString;

console.log(dataUrl);

var jqxhr = $.get(dataUrl)
.done(function(data) {
console.log(data);
drawMap(data); // if we get data back, draw the map

})
.fail(function() {
// if the request fails
alert( "error" );
})
.always(function() {
// upon completion, whether success or fail
});


}


function drawMap(data) {

// define the center and create the map

var map = new google.maps.Map(document.getElementById('divMap'), {
zoom: 4,
center: {lat: 41.8333925, lng: -88.0123393}
});

// for each library record, create a marker and an info window

$.each(data, function (i, entry) {
var contentString = data[i]name_
+ "<br>"
+ data[i].address
+"<br>"
+ data[i].city
+"<br>"
+ data[i].state
"<br>"
+ data[i].zip
"<br>"
+ data[i].phone
"<br>"
+ data[i].hours_of_operation
"<br>"
+ data[i].website.url
+ "<hr>";
});
// create the content for the info window and store in a string var


// create the info window, using the content string
var infowindow = new google.maps.InfoWindow({
content: contentString
});

// create the marker
var marker = new google.maps.Marker({
position: {parseFloat(location.longitude,location.latitude)}
map: map,
title: 'Uluru (Ayers Rock)'
});

// create the click event handler for the marker
marker.addListener('click', function() {
infowindow.open(map, marker);
});

});


}