Google Maps partial for Rails

README.md

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.

_map.html.erb

<%= 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>