Make Map Marker Direct Link Onclick for Gmaps4Rails

Make map marker direct link onclick for gmaps4rails

For this kind of needs, I pass a block to the gmaps4rails method in the controller (doc here):

@json = User.all.to_gmaps4rails do |user, marker|
  marker.json "\"id\": #{user.id}"
  # or
  marker.json "\"link\": #{method_to_create_link}"
end

This way I can have any additional information I need to create a link or anything.

That said, you could update your listener this way:

base_url = "whatever you need";
google.maps.event.addListener(marker, 'click', function(){
   window.location(base_url + marker.id);
   // or
   window.location(marker.link);
});

Gmaps4rails : How to change appearance of marker when user clicks link in sidebar?

You've a javascript issue. Actually, you can't make a closure with a changing counter: it will always be referenced with it's last value.

Gmaps.map.callback = function(){
  for(var i = 0; i < Gmaps.map.markers.length; i++){
    marker = Gmaps.map.markers[i];
    google.maps.event.addListener(marker.serviceObject, 'click', 
      (function(marker){
        return function(){
         console.log($(marker.serviceObject.ne.ga).attr("src", "/assets/marker_sprite2.png"));
        }
      })(marker)
    )
  }
}

Your main issue is a bit long, not complex but long. The idea is the following:

• add an id to each marker, you could use the block argument of the to_gmaps4rails method and add some more json

• create the sidebar yourself and add the id to each line to know which marker you want when you click the li

• loop all markers to get the one with the proper id

• change it's picture

How to get information from the currently clicked marker in gmaps4rails?

You have to add a listener on click:

var handler = Gmaps.build('Google');
handler.buildMap({ provider: { }, internal: {id: 'map'}}, function(){
  // I assume this is the way you retrieve the amrkers array
  var json_data = <%=raw @hash.to_json %>;
  var markers = handler.addMarkers(json_data);

  _.each(json_data, function(json, index){
    var marker  = markers[index];
    json.marker = marker;
    google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
      console.log(json);
      //whatever you need here
    });
  });

});

Gmaps4rails get marker detail when click on particular marker on map in ruby on rails4

all your json is in <%=raw @vnote_hash.to_json %>

So:

var raw_json = <%=raw @vnote_hash.to_json %>;
markers = handler.addMarkers(raw_json);

And in your loop:

raw_json[i].vnote_id

An alternative is to merge object properties so you only use one object.

GoogleMaps4Rails not centering first marker

do this in the buildMap callback

google.maps.event.trigger(markers[0].getServiceObject(), 'click');

What is the standard way in gmaps4rails for dynamically resetting marker icons / pictures?

I resolved this issue by using the replaceMarkers API method. Here's the code that worked:

var replacementMarkers = new Array();
for (var k = 0; k < activeMarkers.length; ++k) {
  var marker = activeMarkers[k];

  var iconUrl = null;
  if ($.inArray(marker, taskMarkers) >= 0) {
    iconUrl = "/assets/purple_MarkerT.png";
  } else {
    iconUrl = "/assets/green_MarkerS.png";
  }

  replacementMarkers.push({
    "lat": marker.lat.toString(),
    "lng": marker.lng.toString(),
    "picture": iconUrl,
    "id": marker.id,
    "description": marker.description
  });
}

// Delay the replacement operation because in some instances, we reach this branch via the Gmaps.map.callback.
// In that case, I prefer to defer touching the gmap4rails until the current branch is done.

window.setTimeout(function() {
  Gmaps.map.replaceMarkers(replacementMarkers);
  resetAddressMarkers();
}, 25);

gmaps4rails : HOW do I set map options such as container ID for a directions map?

You only want a single map right?

In this case:

<%= gmaps( :map_options => { :container_class => "foo", :id => "bar", :class => "baz" },
           "direction" => { "data" => { "from" => "Paris, france", "to" => "Toulon, france" }}
) %>

---

Related Topics