CODEWITHSUNDEEP
ruby-on-railsrubyruby-on-rails-3google-mapsgmaps4rails
Marco Poli
Marco Poli

Reputation: 533

gmaps4rails: How to implement a clickable link on a marker

Using Rails 3.2.13, ruby 1.9.3p374 and Gmaps4rails 1.5.6.

I have been strugling with something that, at first, I thought should be fairly straight forward: I want to display a marker that, when clicked, will redirect to a particular path, loading that path in the same window.

Gmaps4rails has no easy option for that in their description. So I spent countless hours searching the web, and the two best hits I found where here in StackOverflow: this smells like the right path, but this one seems also useful.

In the end, my controller looks like:

@gmapsjson = current_user.houses.all.to_gmaps4rails do | house, marker |
  marker.title house.reference
  marker.json({:link => polymorphic_url(house, :routing_type => :path)})
end

This is correctly (I think) generating the following in the processed html:

<script src="//maps.google.com/maps/api/js?v=3.8&amp;sensor=false&amp;client=&amp;key=&amp;libraries=geometry&amp;language=&amp;hl=&amp;region=" type="text/javascript"></script>

<script type="text/javascript">
  Gmaps.map = new Gmaps4RailsGoogle();
  Gmaps.load_map = function() {
    Gmaps.map.map_options.auto_zoom = false;
    Gmaps.map.map_options.zoom = 3;
    Gmaps.map.initialize();
    Gmaps.map.markers = [{"title":"First House","link":"/houses/1","lat":-3.4671425,"lng":12.5264373},{"title":"Second House","link":"/houses/2","lat":-4.5543296,"lng":-3.4151647}];
    Gmaps.map.create_markers();
    Gmaps.map.adjustMapToBounds();
    Gmaps.map.callback();
 };
 Gmaps.oldOnload = window.onload;
  window.onload = function() { Gmaps.triggerOldOnload(); Gmaps.loadMaps(); };
</script>

Markers appear on the right places. But now, interpreting the described on that first relevant reference, I type directly on view, making sure it will appear below all the other javascripts Gmaps4Rails dumps in the resulting html:

<script type="text/javascript">
  function redirect_to(url) {
    window.location = url
  };
  Gmaps.callback = function() {
    for (var i = 0; i < Gmaps.map.markers.length; ++i) {
      google.maps.event.addListener(Gmaps.map.markers[i].google_object, 'click', redirect_to(Gmaps.map.markers[i].link));
  }
};
</script>

But now, whenever I load the page, my Firefox javascript console will say:

TypeError: Gmaps[load_function_name] is not a function

for (key in Gmaps) {
  value = Gmaps[key];
  searchLoadIncluded = key.search(/load/);
  if (searchLoadIncluded === -1) {
    load_function_name = "load_" + key;
    _results.push(Gmaps[load_function_name]());         <=== Points to this line
  } else {
    _results.push(void 0);
  }
}

So, any ideas on what is wrong?

Thanks in advance,

Marco

Upvotes: 1

Views: 1449

Answers (1)

zmanw
zmanw

Reputation: 169

Rather than doing it in JavaScript you can just generate all the html including the links is your controller. Note: To get the link generated correctly I set it up separately and assigned it to a variable

This is what my locations_controller.rb contains:

  @json = Location.all.to_gmaps4rails do |location, marker|
    location_link = view_context.link_to location.name, location_path(location)
    marker.title location.name
    marker.infowindow "<h4><u>#{location_link}</u></h4> 
                       <i>#{location.address}</i>"
end

When you set it up correctly you'll get hashes generated that look something like this 

{"title":"Home",
 "description":"<h4><u><a href=\"/locations/1\">Place</a></u></h4> 
 <i>123 E Main St. Anytown, USA</i>",
 "lat":29.585019,
 "lng":-81.319479}

The wiki page here helped me. Hope this helps you

Upvotes: 7

Related Questions