I have a working code that shows several markers on a Google map using geocoder , for example @nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km) @nearbys.first(5) and I display markers using the code below
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
BUT the problem: -that if @nearbys has less than 5, then this code does not work. SO I tried to make it dynamic using jquery arrays, but it does not work, because I think that there is something missing in my code to work this dynamically. it should be something like this.
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>'); })
.. SO, how can I achieve this ........ to make this dynamic so that the above working code does not break with newly added code.