I am working on displaying locations from a model with latitude and longitude columns on a Google Map using Ajax and JavaScript. My current approach involves the following code:
map.js:
function initialize()
{
var map;
var latlng = new google.maps.LatLng(37.09, -95.71);
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
disableDoubleClickZoom: true,
noClear: true,
navigationControl: true,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Click me',
});
}
locations_controller.rb
def show
@location = Location.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: @location }
end
end
Page displaying the map:
<div id="map" onload="initialize();">
</div>
Now, my goal is to use Ajax in map.js to fetch locations from the Location model and dynamically pass them to the marker object. This would allow all existing locations in the database to be displayed as markers on the map when it loads.
Thank you.