Turn JSON data containing ee entries into map markers - google-maps

Question

This is the json data
{
"title": "{exp:channel:entries channel="supplier_branches" orderby="title" sort="asc" dynamic="no" limit="500" status="open"}{title}{/exp:channel:entries}",
"info": "infoz",
"lat": "{exp:channel:entries channel="supplier_branches" orderby="title" sort="asc" dynamic="no" limit="500" status="open"}{sb_lat}{/exp:channel:entries}",
"lng": "{exp:channel:entries channel="supplier_branches" orderby="title" sort="asc" dynamic="no" limit="500" status="open"}{sb_lng}{/exp:channel:entries}"
}
This is the code to get markers:
function setMarkers(center, map) {
var json = (function () {
var json = null;
$.ajax({
'dataType': "json",
'url': "/data/supplier_branches/",
'success': function (data) {
json = data;
console.log(JSON.stringify(data, ["title","info","lat","lng"], 4));
}
});
return json;
})();
for (var i = 0, length = json.length; i < length; i++) {
latLng = new google.maps.LatLng(data.lat, data.lng);
var data = json[i];
var marker = new google.maps.Marker({
position: latLng,
title: data.info,
map: map
});
infoBranch(map, marker, data);
}
}
My code is returning the json data but not using it as markers. What is the fault?
Entire map code:
function initialize() {
var latitude = -23.92175976307374,
longitude = 24.120724868774414,
center = new google.maps.LatLng(latitude,longitude),
mapOptions = {
center: center,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_branches"), mapOptions);
setMarkers(center, map);
function setMarkers(center, map) {
var json = (function () {
var json = null;
$.ajax({
'dataType': "json",
'url': "/data/supplier_branches/",
'success': function (data) {
json = data;
console.log(JSON.stringify(data, ["title","info","lat","lng"], 4));
}
});
return json;
})();
for (var i = 0, length = json.length; i < length; i++) {
latLng = new google.maps.LatLng(data.lat, data.lng);
var data = json[i];
var marker = new google.maps.Marker({
position: latLng,
title: data.info,
map: map
});
infoBranch(map, marker, data);
}
}
function infoBranch(map, marker, data) {
var infoWindow = new google.maps.InfoWindow();
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.title+data.info);
infoWindow.open(map, marker);
});
// Creating a closure to retain the correct data
// Note how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.content);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Console error in Chrome:
Uncaught TypeError: Cannot read property 'length' of null branches_maps.js:30
setMarkers branches_maps.js:30
initialize

Answer 1

$.ajax is asynchronous, so json is undefined when you start that for loop. Stick your for loop inside your $.ajax callback function.