14
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails5でGoogleMapsAPIを用い、複数のマーカーを表示する

Last updated at Posted at 2018-09-11

#こんな感じにする
WS000006.JPG

※アイコンはカスタム済み

**基本部分には下記の記事を参考にさせて頂きました。**感謝します。
Rails5でGoogleMapを表示

##使わないもの
・JSON
・gmap4rails

##投稿者の環境
Cloud9
Ruby 2.4.1
Rails 5.2
初心者マインド

#コントローラ
Placeモデルに、latitudeやlongitudeがfloatとして入っているインスタンスが既に存在していると仮定します。

places_controller.rb
class PlacesController < ApplicationController
  def index
    @places = Place.all
  end
end

#ビュー

index.html.erb
<script async defer
 src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=APIキー&callback=initMap">
</script>

中略

<!--マップ-->
<div id="map"></div>

<!-- js部分 -->
<script>
    function initMap() {
      
      //初期表示位置
      var latlng = new google.maps.LatLng(36.30, 139.5);
      //デザイン
      var styles = [
           {
            stylers: [
             { "saturation": -95 },
             { "lightness": -20 }
            ]
           }
          ];
          
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          styles: styles,
          center: latlng
      });
      var transitLayer = new google.maps.TransitLayer();
      transitLayer.setMap(map);
      
      //複数マーカー ここから
      <% @places.each do |place| %>
      (function(){
        var contentString = "住所:<%= place.name %>"; 
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        
        var marker = new google.maps.Marker({
            position:{lat: <%= place.latitude %>, lng: <%= place.longitude %>},
            map: map,
            title: contentString, //お好みのアイコンが無ければ、左のカンマを削除
            icon: 'お好みのアイコンのパス(ない場合はこの行と真上の行のカンマを削除)'
        });
        
        marker.addListener('click', function() {
          infowindow.open(map, marker, content);
        });
       })();
      <% end %>
      //複数マーカー ここまで  
  }
</script>

これで最初の画像のようになるはずです。

#おわりに
JSON使おうとかいろいろやったんですが結果これに落ち着きました。かんたん!
参考【Railsで】GoogleMapsAPIのマーカーをクリックした際にinfowindowを適切に表示したい

14
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?