Skip to content

Instantly share code, notes, and snippets.

@bswinnerton
Last active August 29, 2015 14:21
Show Gist options
  • Save bswinnerton/20b8f166c1ebd800627d to your computer and use it in GitHub Desktop.
Save bswinnerton/20b8f166c1ebd800627d to your computer and use it in GitHub Desktop.
Google Maps partial for Rails

Google Maps partial for Rails

In your view:

app/views/cats/index.html.erb

<%= render 'map', collection: @cats %>

(With the assumption you have something like this in your controller:

app/controllers/cats_controller.rb

class CatsController < ApplicationController
  def index
    @cats = Cat.all
  end
end

Troubleshooting

"undefined" appearing when clicking on info window

When you see "undefined" appear in the info window, this means that the wrong attribute is being called on the collection. The partial assumes you'll have an attribute called "name" or "description", but you may store that information in "title" and "body". You can change these values in the start of the partial.

<%= javascript_include_tag 'https://maps.googleapis.com/maps/api/js' %>
<script type="text/javascript">
var App = {
/* Change these settings to alter the way the map is rendered */
//
startingLatitude: 40.706709, // The latitude the map should open on
startingLongitude: -73.923516, // The longitude the map should open on
infoWindowTitleAttribute: 'name', // The attribute on the collection being passed to this partial to use for the title
infoWindowBodyAttribute: 'address', // The attribute on the collection being passed to this partial to use for the body
//
/* Do not alter anything below this line */
places: [],
initialize: function() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(App.startingLatitude, App.startingLongitude)
};
App.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
App.places = <%= collection.to_json.html_safe %>;
App.addMarkers();
},
addMarkers: function() {
for (i = 0; i < App.places.length; i++) {
var place = App.places[i];
place.marker = new google.maps.Marker({
map: App.map,
position: new google.maps.LatLng(place.latitude, place.longitude),
infoWindow: new google.maps.InfoWindow(),
});
App.addMarkerClickEvent(place);
}
},
moveToMarker: function(marker) {
App.map.panTo(marker.position);
App.map.setZoom(15);
},
closeAllInfoWindows: function() {
for (i = 0; i < App.places.length; i++) {
App.places[i].marker.infoWindow.close();
}
},
addMarkerClickEvent: function(place) {
google.maps.event.addListener(place.marker, 'click', (function(place) {
return function() {
App.closeAllInfoWindows();
place.marker.infoWindow.setContent(
'<h4>' + place[App.infoWindowTitleAttribute] + '</h4>' + "\n" +
'<p>' + place[App.infoWindowBodyAttribute] + '</p>'
);
place.marker.infoWindow.open(App.map, place.marker);
App.moveToMarker(place.marker);
};
})(place));
},
};
google.maps.event.addDomListener(window, 'load', App.initialize)
</script>
<div id="map-canvas"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment