Rails 4 - Gmaps4Rails - Map Won't Render

Rails 4 - Gmaps4Rails - map won't render

So your problem is with these two lines:

<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script>

Somebody referenced markerclusterer and infobox libraries directly from Google SVN (which is a bad practise) and the library was moved to Github couple of weeks ago.

You can download the infobox library from here to your project and reference infobox_packed.js file:

<script src='path/to/infobox_packed.js' type='text/javascript'></script>

Similarly, you can download the marker clusterer library here. Careful: for marker cluster you will need both src and images.

Please read this SO question and answers, also this one and maybe this one. I strongly advice you to read all the answers in the questions, as some of them contain bad solutions (reference libraries from the new github location, instead of downloading them to your project and referencing them from there is bad practise)

When revisiting home page, gmaps won't reload

Problems is the turbolink.

Disable turbolink on all link_to the page has map or remove require turbolink on you app/assets/javascripts/application.js

Example:

<%= link_to('HOME', root_path, 'data-no-turbolink' => true) %>

Rendering a Gmap through an AJAX call with Gmaps4rails

The reason is quite simple: the partial contains much javascript you can't load and execute this way.

So you can't use RJS there.

The proper way to do is UJS: get data with an AJAX call and render the result. In the following code, I use jQuery.

In your view add:

//include google script
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=geometry'></script>
//include gmaps4rails javascript
<%=javascript_include_tag 'gmaps4rails' %>

<script type="text/javascript" charset="utf-8">
//load map when button click (replace with what you want)
$('#ajax_map').click(function(){
  //you have to set a size to the div otherwise the map won't display, that's the purpose of these css classes
  $('#map_container').addClass('map_container');
  $('#gmaps4rails_map').addClass('gmaps4rails_map');
  //create the map object
  Gmaps4Rails.initialize();
  //of course, replace these two with your dynamic data, you'd have to use some $.ajax jQuery method.
  Gmaps4Rails.direction_conf.origin = 'toulon, france';
  Gmaps4Rails.direction_conf.destination = 'paris, france';
  //read the js file, you can customize much more: https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/public/javascripts/gmaps4rails.js
  Gmaps4Rails.create_direction();
});
</script>

<div id="map_container"> 
  <div id="gmaps4rails_map"></div>
</div>

<button type="button" id="ajax_map">Ajax Map</button>

Add the following class in your CSS:

#map-container {
  width: 800px;
}

#gmaps4rails_map {
  width: 800px;
  height: 400px;
}

GMaps4Rails and Turbolinks not loading without full page refresh

The fix ended up that I need a full page load for the scripts to refresh.

Adding

'data-no-turbolink' => true

to the link that goes to the maps page worked.

For example, if I have an index page of clients, and I have a map of where the client lives on the show page, the link to go to the show page would be formatted as below:

<%= link_to 'View Client', client, class: "btn", 'data-no-turbolink' => true %>

This will cause a full refresh of the html and javascript, instead of just the changed html.

Google Maps for Rails - update markers with AJAX

Why don't you just update the map with the new markers? Meaning, instead of re-rendering the whole map after each search, just update the markers on the existing map by removing all markers and adding the new ones.

I haven't verified the method, but I guess it should work and be more efficient:

Create a app/assets/javascript/map.js file. You can store your map-related functions there. Create a function to update your map's markers in this file:

map.js

(function() {
  /* __markers will hold a reference to all markers currently shown
     on the map, as GMaps4Rails won't do it for you.
     This won't pollute the global window object because we're nested
     in a "self-executed" anonymous function */
  var __markers;

  function updateMarkers(map, markersData) 
  {
    // Remove current markers
    map.removeMarkers(__markers);

    // Add each marker to the map according to received data
    __markers = _.map(markersData, function(markerJSON) {
      marker = map.addMarker(markerJSON);
      map.getMap().setZoom(4); // Not sure this should be in this iterator!

      _.extend(marker, markerJSON);

      marker.infowindow = new google.maps.InfoWindow({
        content: marker.infowindow
      });

      return marker;
    });

    map.bounds.extendWith(__markers);
    map.fitMapToBounds();
  };

  // "Publish" our method on window. You should probably have your own namespace
  window.updateMarkers = updateMarkers;
})();

This function can be used to initialize your map and to update it. As you will not (if my answer satisfies you) render the map twice, you can delete _google_map.erb and put its content back into search.html.erb, but using the function we've just created:

search.html.erb

    <div id="map" style='width: 100%; height: 700px;'>
</div>
  <!-- Beginning Google maps -->

<script type="text/javascript" id="map_script">
   $(document).ready(function() {
       mapHandler = Gmaps.build('Google');
       mapHandler.buildMap({ provider: {
           disableDefaultUI: true,
           mapTypeId: google.maps.MapTypeId.TERRAIN
         }, internal: {id: 'map'}
       }, function(){
         var markersData = <%= raw @hash.to_json %>;
         updateMarkers(mapHandler, markersData);
       });
   }); // Document ready
</script>

Please don't forget the var keyword when declaring variables, otherwise they will end up being globals, and that's bad ^^

Note that I have deliberately left mapHandler as a global variable: you will need access to your handler to update markers later when someone uses the search. This is probably not an ideal thing to do, but this question is not about refactoring your code so let's keep it this way.

So now my solution brings you a map that initializes with the given markers on page load. In other words, nothing has changed!

However you're now allowed to reuse this updateMarkers function to change the markers displayed on your map. That's what you search.js.erb script should do:

search.js.erb

(function() {
  var markersData = <%= raw @hash.to_json %>;
  updateMarkers(mapHandler, markersData);
})();

That's it! Hopefully it'll take you to the next step of your project :)

---

Related Topics