My goal is to integrate remote API JSON data into Google Maps. Currently, my code successfully works with local JSON data that is within the same script. However, I want to populate the Google Map with remote API JSON data. I am using AngularJS Google Maps integration for this purpose. The code functions perfectly when referencing JSON data from the script where Google Maps is implemented locally. But now, I need to populate the Google Maps with JSON from an external source (remote JSON). Any advice on how to achieve this? Below is a snippet of my code:
var points = this;
points.testData = [];
$http({
method: 'GET',
url: 'https://api.jsonbin.io/b/61361f26dfe0cf16eb55fd9f',
})
.then(function successCallback(response) {
console.log("success,", response);
$scope.testData = response.data;
}, function errorCallback(response) {
console.log("failure,", response);
});
// GOOGLE MAPS CODE
$scope.highlighters = [];
$scope.gMap = null;
var winInfo = new google.maps.InfoWindow();
var googleMapOption = {
zoom: 2,
center: new google.maps.LatLng(2.8, -187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.gMap = new google.maps.Map(document.getElementById('googleMap'), googleMapOption);
var createHighlighter = function(city) {
var cityInfo = new google.maps.Marker({
map: $scope.gMap,
position: new google.maps.LatLng(city.attributes.coordinates.lat, city.attributes.coordinates.lng),
title: city.attributes.name
});
cityInfo.content = '<div>' + city.attributes.address1 + '</div>' +
'<div>' + city.attributes.openingHours + '</div>';
google.maps.event.addListener(cityInfo, 'click', function() {
winInfo.setContent('<h1>' + cityInfo.title + '</h1>' + cityInfo.content);
winInfo.open($scope.gMap, cityInfo);
});
$scope.highlighters.push(cityInfo);
};
for (var i = 0; i < testData.length; i++) {
createHighlighter(testData[i]);
}
This is my JSON file
var cities = [{
"attributes": {
"name": "Test1",
"city": "Mthatha",
"address1": "Cnr Sisson and Sutherland Road",
"coordinates": {
"lng": 28.7648433,
"lat": -31.5805384
},
"openingHours": "Mon-Fri: 8am-6pm, Sat-Sun: 8am-5pm"
},
"attributes": {
"name": "Test2",
"city": "Mthatha",
"address1": "Cnr Sisson and Sutherland Road",
"coordinates": {
"lng": 28.7648433,
"lat": -31.5805384
},
"openingHours": "Mon-Fri: 8am-6pm, Sat-Sun: 8am-5pm"
}];