Using JSON Data to Populate a Google Map with Database Objects
- by MikeH
I'm revising this question after reading the resources mentioned in the original answers and working through implementing it.
I'm using the google maps api to integrate a map into my Rails site. I have a markets model with the following columns: ID, name, address, lat, lng.
On my markets/index view, I want to populate a map with all the markets in my markets table. I'm trying to output @markets as json data, and that's where I'm running into problems. I have the basic map displaying, but right now it's just a blank map. I'm following the tutorials very closely, but I can't get the markers to generate dynamically from the json. Any help is much appreciated!
Here's my setup:
Markets Controller:
def index
@markets = Market.filter_city(params[:filter])
respond_to do |format|
format.html # index.html.erb
format.json { render :json => @market}
format.xml { render :xml => @market }
end
end
Markets/index view:
<head>
<script type="text/javascript"
src="http://www.google.com/jsapi?key=GOOGLE KEY REDACTED, BUT IT'S THERE" >
</script>
<script type="text/javascript">
var markets = <%= @markets.to_json %>;
</script>
<script type="text/javascript" charset="utf-8">
google.load("maps", "2.x");
google.load("jquery", "1.3.2");
</script>
</head>
<body>
<div id="map" style="width:400px; height:300px;"></div>
</body>
Public/javascripts/application.js:
function initialize() {
if (GBrowserIsCompatible() && typeof markets != 'undefined') {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.7371, -73.9903), 13);
map.addControl(new GLargeMapControl());
function createMarker(latlng, market) {
var marker = new GMarker(latlng);
var html="<strong>"+market.name+"</strong><br />"+market.address;
GEvent.addListener(marker,"click", function() {
map.openInfoWindowHtml(latlng, html);
});
return marker;
}
var bounds = new GLatLngBounds;
for (var i = 0; i < markets.length; i++) {
var latlng=new GLatLng(markets[i].lat,markets[i].lng)
bounds.extend(latlng);
map.addOverlay(createMarker(latlng, markets[i]));
}
}
}
window.onload=initialize;
window.onunload=GUnload;
