Gmaps4rails - 如何调用外标记信息窗口从地图(Gmaps4rails - How to

我已经使用gmaps4rails成功过，但这次我有需要，我无法弄清楚如何做到这一点。

我有我的工作的建设者，并生成我map_info的谐音，同时，我也可以通过点击地图中打开从标记信息窗口每次。

我需要的是从列表中调用标记的信息窗口。（例如一个div里onclick事件）

内部控制建设者

 @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的标记+地图生成器

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;
    }
);

让我知道，如果你需要更多的细节！谢谢

Answer 1:

最简单的办法是触发标记的点击事件：

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

见工作普拉克这里

Answer 2:

您需要添加id来标记

更改地图和标记生成JS来

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;
});

然后写js函数

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);
        }
    });
}

然后将其添加到onclick列表元素

Gmaps.openMarkerInfo(1);

Answer 3:

我发现了一个解决方案。看一看...

使用Javascript的onclick功能

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

Javascript地图+标志发生器

  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();
  }
  );

然后，调用onclick事件。