google map API でrailsアプリにmapを描画

前書き

rails でモデルが持っている住所情報からgoogleマップを表示するjsを書いたときに詰まったのでメモ。

参考

地名や住所から緯度・経度を取得する

内容

google map api では緯度経度からmapを描画することになっている。しかしながらモデルが持っている情報は住所である。ググったところ、Geocoderというgemについての記事がたくさん見つかったので使ってみた。どうやらこのライブラリは内部に住所や施設の名前などから緯度経度までいろんな情報を持っている優秀なgemだということがわかった。しかしながら、例えば私の出身地である静岡県湖西市などの都会ではない場所の情報は持っておらず、mapが表示できない問題があることがわかった。gemに地図の情報がたくさんあるのはすごいのだけど、なんでgemに頼る必要があるのか？一番地図情報を持ってるにはgoogle mapに決まってるよね。と考え直してさらにググったところ、上記の参考サイトを見つけてやっぱりgoogle map自体もGeocoderというクラスを持っていることがわかった。そして下記のように実装。うまく描画された。

<div id="map"></div>

<script>
function initMap(latlng) {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 16
  });

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
}

function getLatLng() {
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({
    address: "<%= @place.prefecture %><%= @place.city %><%= @place.street %>"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      for (var i in results) {
        if (results[i].geometry) {
          var latlng = results[i].geometry.location;
          initMap(latlng)
        }
      }
    }
  });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=[APIのキー]&callback=getLatLng"
async defer></script>

結論

google map apiを利用するときにはgemではなくgoogle.maps.Geocoderクラスを利用するのが良い。

その他

mapのサイズ等cssをscssファイルに書くのを忘れないように。