소개

Google-Maps-for-Rails 은 Rails에서 Google Map을 표시하기 위한 gem입니다. 이 기사에서는 Google Map 마커에 연결된 정보 창을 여는 이벤트를 발생시키는 방법을 소개합니다.

환경

Rails 5.1.4

Ruby 2.4.1

gem’gmaps4rails’ ( htps : // 기주 b. 코 m / 아 p 네아 ゔ ぃ g / 오오 ぇ- ぇ ぉ ぉ r 라 ls)

1. 정보 창 만들기

map_controller.rb

class MapController < ApplicationController
  def index
    @places =Place.all
    @hash = Gmaps4rails.build_markers(@places) do |place, marker|
      marker.lat place.latitude
      marker.lng place.longitude
      marker.infowindow render_to_string( partial: "map/infowindow",
                                          locals: { place: place} )
      marker.json({ id: place.id, })
    end
  end
end

_infowindow.html.erb

<div>
  <%= link_to "#{place.name}", place %>
</div>

위와 같이 정보 창을 만듭니다. 이벤트 발생 시 마커를 지정할 수 있도록 place의 id를 마커에 추가해 둡니다.

2. 마커의 serviceObject에 정보 창 설정

마커의 serviceObject에 place id와 infowindow를 설정합니다.

Gmaps.store = {}
Gmaps.store.markers = markers.map(function(m) {
  marker = handler.addMarker(m);
  marker.serviceObject.set('id', m.id);
  marker.serviceObject.set('infowindow', m.infowindow);
  return marker;
});

3. 정보 창의 리스너 추가

정보 창의 리스너를 추가합니다. 이벤트 발생 시에는 지정된 id의 마커에 대한 정보 창을 열어야 합니다.

google.maps.event.addListener(handler.getMap(), "open", function(id) {
  $.each(Gmaps.store.markers, function() {
    if (this.serviceObject.id == id) {
      infowindow = new google.maps.InfoWindow({
        content: this.serviceObject.infowindow
      });
      infowindow.open(this.serviceObject.map, this.serviceObject);
    }
  });
});

index.html.erb의 전체는 다음과 같습니다.

map/index.html.erb

<div class="map_container">
  <div id="map" class="map_canvas"></div>
</div>

<script type="text/javascript">
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = <%= raw @hash.to_json %>
    Gmaps.store = {}
    Gmaps.store.markers = markers.map(function(m) {
      marker = handler.addMarker(m);
      marker.serviceObject.set('id', m.id);
      marker.serviceObject.set('infowindow', m.infowindow);
      return marker;
    });
    handler.bounds.extendWith(Gmaps.store.markers);
    handler.fitMapToBounds();
    handler.getMap().setCenter(new google.maps.LatLng(35.720969, 139.735877));
    handler.getMap().setZoom(12);
    google.maps.event.addListener(handler.getMap(), "open", function(id) {
      $.each(Gmaps.store.markers, function() {
        if (this.serviceObject.id == id) {
          infowindow = new google.maps.InfoWindow({
            content: this.serviceObject.infowindow
          });
          infowindow.open(this.serviceObject.map, this.serviceObject);
        }
      });
    });
  });
</script>

4. 이벤트 발생

그리고는, 아래와 같이 이벤트를 발생시키는 것으로, 지정한 정보 윈도우를 열 수가 있습니다.

google.maps.event.trigger(handler.getMap(), "open", id);

문제점

이벤트가 발생하면 마커를 클릭하면 이중으로 정보 창이 열립니다.

해결책

아래 코드를 추가하면 클릭 이벤트에서 열린 정보 창을 닫을 수 있습니다.

if (handler.currentInfowindow()) {
  handler.currentInfowindow().close();
}

요약

Google-Maps-for-Rails를 사용하여 Google Map 마커에 연결된 정보 창을 여는 이벤트를 발생시키는 방법을 소개했습니다. 이 방법을 사용하면 마커의 클릭 이벤트 외에도 원하는 시간에 지정한 마커의 정보 창을 열 수 있습니다.