Search code examples
ruby-on-railsruby-on-rails-3gmaps4rails

Using gmap4rails, how do you render marker-specific auxiliary HTML content, alongside GMap?


[Refer to https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Markers]

I followed instructions for creating a GMap sidebar. This is not quite what I want to achieve. Bear in mind that my GMap contains heterogeneous markers, a subset of which I would like to highlight in auxiliary HTML content near the GMap (Eg, in a table or whatever):

Question #1: where do you loop over all markers and select only those for which you want auxiliary HTML content? (I know you have block-support logic for supplementing the default JSON for each marker; I'm not sure that's what I need.)

Question #2: Is there some callback in javascript that I can implement, so that when a marker is rendered, I can check what kind of marker it is, and then appropriately modify the DOM (ie, the auxiliary HTML content)?

My view is that the JSON for each marker should have a property that can uniquely identify that marker. Maybe for now it is simply the "description" attribute. Then provided we have some callback in javascript, we can deference only those markers that belong to a certain "description" category -- Eg, the "red, white, and blue" markers. The callback in javascript can then manipulate the relevant elements in the DOM, thus creating the auxiliary custom HTML content alongside the GMap.


Solution

  • If you want to get unique identifier for each marker, you should use every object id:

    your_objects.to_gmaps4rails do |obj, marker|
      marker.json({id: obj.id})
    end
    

    Answer1:

    All markers are stored by default in Gmaps.map.markers. You could get the id of the first marker this way: Gmaps.map.markers[0].id

    So create your own function with your adequqte logic.

    Answer2:

    The callback to use is Gmaps.map.callback.

    Basically, do:

    <%= gmaps(your_options) %>
    
    <% content_for :scripts do %>
    <script type="text/javascript">
    Gmaps.map.callback = function() {
      //your code
    }
    </script>
    <% end %>