Gmaps4rails - How to call infowindow marker outside from maps

问题

I have used gmaps4rails before with success but this time i have a need that i cant figure out how to do it.

I have my builder working and generating my map_info partials, also, i am able to open every infowindow from markers by clicking inside the map.

What i need is to call the infowindow of a marker from a list. (onclick event inside a div for instance)

builder inside controller

 @gmaps_markers = Gmaps4rails.build_markers(@partners) do |partner, marker|
   marker.lat    partner.latitude
   marker.lng    partner.longitude
   marker.title  partner.company
   marker.json({:id => partner.id })        
   marker.infowindow render_to_string(partial: 'pages/partials/subscribe/map_info', locals: { partner: partner })
 end

javascript markers + maps generator

handler = Gmaps.build('Google', {
    markers: {
        clusterer: {
            gridSize: 10,
            maxZoom: 15
        }
    }
});
handler.buildMap({
        provider: {
            disableDefaultUI: false
        },
        internal: {
            id: 'gmaps'
        }
    },
    function() {
        markers = handler.addMarkers(#{
            raw @gmaps_markers.to_json
        });
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
        handler.getMap().setZoom(8);
        handler.map.centerOn;
    }
);

Let me know if you need more details! Thanks

回答1:

The easiest option is to trigger the click event on the marker:

function openMarkerInfo(id) {
  $.each(markers, function(index, marker) {
    if (marker.id == id) {
      google.maps.event.trigger(marker.getServiceObject(), 'click')
    }
  });
};

See working plunk here

回答2:

You need to add id to marker

Change your map and markers generation js to

Gmaps.store = {}

handler = Gmaps.build('Google', {
    markers: {
        clusterer: {
            gridSize: 10,
            maxZoom: 15
        }
    }
});
handler.buildMap({
    provider: {
        disableDefaultUI: false
    },
    internal: {
        id: 'gmaps'
    }
},
function() {
    Gmaps.store.markers = handler.addMarkers(#{
        raw @gmaps_markers.to_json
    });
    handler.bounds.extendWith(Gmaps.store.markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(8);
    handler.map.centerOn;
});

Then write js function

Gmaps.openMarkerInfo = function(id) {
    $.each(Gmaps.store.markers, function() {
        if (this.serviceObject.id == id) {
            var infowindow = this.infowindow;
            infowindow.open(Gmaps.map.map, marker.serviceObject);
        }
    });
}

Then add it to onclick of your list element

Gmaps.openMarkerInfo(1);

回答3:

i found a solution. Take a look...

Javascript onclick function

  openInfoWindow = function(id) {
    $.each(Gmaps.store.markers, function() {  
      if (this.serviceObject.id == id) {
        google.maps.event.trigger(this.getServiceObject(), 'click')
      }      
    });
  }

Javascript maps + markers generator

  Gmaps.store = {}
  Gmaps.store.handler = Gmaps.build('Google',
  {
    markers: {
      clusterer: {
        gridSize: 10, maxZoom:15
      }
    }
  });
  Gmaps.store.handler.buildMap({
    provider: {
      disableDefaultUI: false            
    },
    internal: {
      id: 'gmaps'
    }
  },
  function(){
    markers = #{raw @gmaps_markers.to_json};
    Gmaps.store.markers = markers.map(function(m) {
      marker = Gmaps.store.handler.addMarker(m);
      marker.serviceObject.set('id', m.id);
      return marker;      
    });
    Gmaps.store.handler.bounds.extendWith(Gmaps.store.markers);
    Gmaps.store.handler.fitMapToBounds();
  }
  );

And then, call onclick event.