Mostrar marcadores en Google Maps dinámicamente -Rails 3.2
Tengo un código de trabajo que muestra múltiples marcadores en el mapa de Google usandogeocoder
como@nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km) @nearbys.first(5)
y muestro los marcadores usando el siguiente código
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas-guest"), mapOptions);
map.setTilt(45);
// adding Multiple Markers from ruby object
var markers = [
['<%= @nearbys[0].title %>', '<%= @nearbys[0].latitude %>','<%= @nearbys[0].longitude %>'],
['<%= @nearbys[1].title %>', '<%= @nearbys[1].latitude %>','<%= @nearbys[1].longitude %>'],
['<%= @nearbys[2].title %>', '<%= @nearbys[2].latitude %>','<%= @nearbys[2].longitude %>'],
['<%= @nearbys[3].title %>', '<%= @nearbys[3].latitude %>','<%= @nearbys[3].longitude %>']
,
['<%= @nearbys[4].title %>', '<%= @nearbys[4].latitude %>','<%= @nearbys[4].longitude %>']
];
// adding Info Window Content
var infoWindowContent = [
['<div class="info_content" >' +
'<h3><%= @nearbys[0].title %></h3>' +'</br>'+
'<p><%= @nearbys[0].about %></p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= @nearbys[1].title %></h3>' +
'<p><%= @nearbys[1].about %></p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= @nearbys[2].title %></h3>' +'</br>'+
'<p><%= @nearbys[2].about %></p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= @nearbys[3].title %></h3>' +'</br>'+
'<p><%= @nearbys[2].about %>/p>' +
'</div>'],
['<div class="info_content">' +
'<h3><%= @nearbys[4].title %></h3>' +'</br>'+
'<p><%= @nearbys[4].about %></p>' +
'</div>']
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}//initialize ends
PERO el problema es: -lo que si @nearbys tiene menos de 5 conteos, entonces este código falla. Por lo tanto, he estado tratando de hacerlo dinámico usando matrices jquery pero no funciona porque creo que mi código no tiene algo para funcionar dinámicamente. debería ser algo como esto ...
var array=<%= @nearbys%>;
var markers=[];
var infowindows=[];
array.each(function(index){
markers.push('<%= @nearbys[0].title %>', '<%= @nearbys[0].latitude %>','<%= @nearbys[0].longitude %>');
infowindows.push('<div class="info_content" >'+'<h3><%= @nearbys[0].title %></h3>' +'</br>'+
'<p><%= @nearbys[0].about %></p>'+'</div>');
})
Entonces, cómo puedo lograr esto ... para hacer esta dinámica de modo que el código de trabajo anterior no se rompa con el código recién agregado.