I am searching for a solution for the following: I have one JSON file that consists out of multiple locations. Each location object contains of longitude, latitude and the location title.
What I would like to have is that for each JSON object, so for each location, there will be create a new Google Maps on the same page. Not hardcoded.
I use the very basic markup for displaying Google Maps. Live example you can see here: http://codepen.io/Caspert/pen/VvXXGP
{
"title": "Locations",
"locations": [
,{
"title": "Location 1",
"lat": 51.5046803,
"lng": -0.1746135
},{
"title": "Location 2",
"lat": 51.5046403,
"lng": -0.1744135
},{
"title": "Location 3",
"lat": 51.5046403,
"lng": -0.1744135
}
]
}
I read out my JSON file with jQuery AJAX, like the following:
init: function(){
// Development
console.log('init dataController');
// Declare variables
var root = this; // This in this function
$.ajax({
url: 'api/videoData.js',
dataType: 'json',
success: function(data) {
root.dataArr = data;
root.objectArr = root.dataArr.content;
var modelCount = 0;
var modelTypeCount = 0;
// When all objects are received
$.when(
// Deferred object (probably Ajax request)
// GET text format
$.get('directives/format-text.html', function(response){
console.log('succes');
console.log(response);
root.dataModelText = response;
}),
// GET location format
$.get('directives/format-map.html', function(response){
console.log('succes');
console.log(response);
root.dataModelLocation = response;
}),
)
.then(function() {
for (var i = 0; i < data.content.length; i++) {
if (data.content[modelCount].type == 'text' || data.content[modelCount].type == 'youtube' || data.content[modelCount].type == 'tickets') {
Triptube.dataController.getDataText(root.dataModelText, data, modelCount);
}
if (data.content[modelCount].type == 'location') {
modelTypeCount++;
Triptube.dataController.getDataLocation(root.dataModelLocation, data, modelCount, modelTypeCount);
}
modelCount++;
}
});
function getData() {
var modelParts = 4;
var modelCount = 0;
for (var i = 0; i < modelParts; i++) {
if (data.content[modelCount].type == 'location') {
console.log('type == location');
};
modelCount++;
console.log(modelCount);
}
$('body').removeClass('loading');
}
},
error: function(data) {
console.log(data);
console.log('Houston, we have a problem!');
}
});
},
getDataLocation: function(dataModelLocation, data, modelCount, modelTypeCount){
var root = this;
var raw_model = root.dataModelLocation;
model = $(raw_model);
var dataID = data.content[modelCount].timeTrigger;
var dataIndex = modelCount;
model.attr('data-id', dataID);
model.attr('data-index', dataIndex);
model.find('.format').addClass(' ' + data.content[modelCount].type);
model.find('#map').attr('map-id', modelTypeCount);
$(model).insertBefore('.featured .footer');
},
I look out for an solution.
UPDATE
I came up with the following: http://codepen.io/Caspert/pen/LpdwZW?editors=101
With the instructions of @Nedvajz I get the following error on panning in the map:
Uncaught TypeError: Cannot read property 'x' of undefined
The map id's have it's unique index, but all the same google maps values:
You have to make for each item its own element & map object. It will let you assign the marker for each map then. Like so: http://codepen.io/anon/pen/epMqKz
With file you provided plese do something like:
function initMap() {
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var maps = [];
for (var i = 0; i < locations.length; i++) {
console.log(locations[i][1]);
$('.maps-wrapper').append('<div class="map" id="map' + i + '"></div>');
var latlng = {lat: locations[i][1], lng: locations[i][2]};
var mapOptions = {
center: latlng,
scrollwheel: false,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map' + i), mapOptions);
maps.push(map);
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: locations[i][0]
});
};
}
initMap();