Markerクリックでモーダルを実装する、マーカーはRailsから。

2016年3月末の情報です。更新されても知りません。また、Rails5のβ版が出ているようですが、Rails4でやってます。

• Railsのデータベースから、GoogleMapにマーカーを落とす。
• マーカークリックでモーダルウィンドウを開く。
• モーダルの中に、情報を表示する。
• カスタマイズが難しかったので、gmaps4railsは使わない。

準備

APIKEY

GoogleDevelopersへ登録し、APIKEYを入手する。生成されたスクリプトとAPIKEYをHTML文に貼り付ける。開発環境でアセットを行っていなかったからかはわかりませんが、application.html.erbにスクリプトのURLを貼り付けた場合、更新でしか地図が表示されなくなりました。これ要注意!

Bootstrap

vendor/assets配下にそれぞれ格納する。読み込みはapp/assets配下のそれぞれのapplicationファイルから。

地図の大きさについて

id="map"に縦の大きさが無いと表示されないようです。横の要素はbootstrapのクラスcol-xs-12等が使えるのですが、縦は自分で決めないといけない。そのため、僕はスマホ対応を考え、下記のようにしました。もっといいやり方があったら教えて欲しいものです。

map.css

@media screen and (max-width: 768px) {
    #map {
        height: 50vh;
    }
}

導入

モーダルの導入

Bootstrapの公式からのコピペでOK。下記のスクリプトからは、こちらに含まれる、#myModalLabel内のHTML要素を書き換える。

データベースから受け取る

スクリプトはこんな感じ。Userモデルを作成し、緯度経度の情報を渡す。addListenerでは、クリックした時のアクションを追加する。

index.html.erb

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: 37, lng: 137}
    });

    var markers = [];
    <% User.all.each do |f| %>
      markers.push(new google.maps.Marker({
        position: {lat: <%= f.latitude %>, lng: <%= f.longitude %>},
        map: map,
        title: 'Hello World!'
        }).addListener('click', function() {
         $('#myModal').modal(),
         $('#myModalLabel').html('<%= f.title %>')
      })
      );
    <% end %>
  }
</script>

MarkerClustererの導入

マーカーが多くなりすぎた時に、近場のマーカーを一箇所にまとめて動作を軽くしてくれる。残念ながらこちらは導入できず。.addListenerとぶつかってしまい、うまくいきませんでした。モーダルを利用しない場合は、利用した方がいいと思います。

index.html.erb

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: 37, lng: 137}
    });

    var markers = [];
    <% User.all.each do |f| %>
      markers.push(new google.maps.Marker({
        position: {lat: <%= f.latitude %>, lng: <%= f.longitude %>},
        map: map,
        title: 'Hello World!'
        })
      );
    <% end %>
    var markerCluster = new MarkerClusterer(map, markers);
  }
</script>

markerClusterはこちらからダウンロードし、vendor/assets/javascriptに入れた。

終わり

とりあえず、当初の目的のマーカーからのモーダルが出来たのでよしとする。いずれは、モーダルとMarkerClustererの共存も画策したいが、現在の僕のレベルでどうにかなるのか。うまいやり方あったら教えてください。