More than 5 years have passed since last update.

Railsで投稿した内容をGoogleMap上にmarkerで表示させる方法

Last updated at 2020-02-20Posted at 2020-02-20

はじめに

世界中の絶景を投稿できるアプリが作れます。
マップの表示方法はGoogleMapsAPIを使いました。
投稿した内容から自動的に軽度と緯度を取得してGoogleMapsAPIのマップ上に表示させます。
完成形はこんな感じ

環境

Ruby 2.5.1
Rails 5.2.3
MySQL 5.6

%div{:style => "width: 100%;"}
  #map{:style => "width: 100%; height: 100vh;"}


:javascript
  function initMap(){
    let map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
    });
  }

%script{:src => "https://maps.googleapis.com/maps/api/js?key=#{Rails.application.credentials[:GOOGLE_MAP_KEY]}&callback=initMap"}

先ほどのAPIキーをcredentialsで隠しておきます
ターミナル上で

EDITOR="vi" bin/rails credentials:edit

GOOGLE_MAP_KEY: MyAPIKey

MyAPIKeyの部分は先ほど取得したkeyを入力してください
これで一応マップ表示ができたと思います！

投稿機能を作り軽度、緯度取得

まずは投稿機能を作るためにpostsのviewとcontroller,modelを作ります。

rails g scaffold posts name:string description:string latitude:float longitude:float
rake db:migrate

表示をgmaps4railsのgemを使って表示する方法に変えます。

Gemfile

gem 'gmaps4rails'

underscore、gmaps/googleをapplicaton.jsに追加します。

//= require underscore  //追加
//= require gmaps/google　　//追加
//= require_tree .

app/assets/javascripts/underscore.jsを作り
こちらの中身を全部コピペ

views/maps/index.html.haml

%div{:style => "width: 100%;"}
  #map{:style => "width: 100%; height: 100vh;"}

:javascript
  handler = Gmaps.build('Google');
  handler.buildMap({ 
    provider: {mapTypeId: 'hybrid'},
    internal: {id: 'map'}
    }, 
    function(){
    markers = handler.addMarkers(#{raw @hash.to_json})
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setCenter(new google.maps.LatLng(35.681298, 139.7640582));
    handler.getMap().setZoom(4);
  });

provider: {mapTypeId: 'hybrid'}の部分でマップのタイプを変えることができます。
何もなければ最初のタイプです。
他のタイプは下記を参照してください。

　ROADMAP 道路や建物などが表示される地図です
　SATELLITE 衛星写真を使った地図です
　HYBRID ROADMAPとSATELLITEの複合した地図です
　TERRAIN 地形情報を使った地図です

applicationにkeyを移してどこでも使えるようにします。

application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Gmap
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    %script{:src => "//maps.google.com/maps/api/js?key=#{Rails.application.credentials[:GOOGLE_MAP_KEY]}"}
    %script{:src => "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"}

    = yield

コントローラーに投稿した場所にmarkerが立つようにします。

maps_controller.rb

class MapsController < ApplicationController
  def index
    @posts = Post.all
    @hash = Gmaps4rails.build_markers(@post) do |post, marker|
      marker.lat post.latitude
      marker.lng post.longitude
      marker.infowindow post.description
    end
  end
end

marker.infowindow post.descriptionのところに表示させたいカラムを変えれば表示内容を変えれます。
今回はdescriptionにします。

これでマーカーが立つようになりました。
あとは新規投稿で軽度、緯度を取得できるようにします

gem 'geocoder'

post.rb

class Post < ApplicationRecord
  geocoded_by :name
  after_validation :geocode
end

名前のカラム名で軽度と緯度が取得できるようになったので
あとは送信する時に余計なカラムを消しておきます。

posts/_form.html.haml

  .field
    = f.label :name
    = f.text_field :name
  .field
    = f.label :description
    = f.text_field :description
  .field
    = f.label :latitude
    = f.text_field :latitude
  .field
    = f.label :longitude
    = f.text_field :longitude
  .actions
    = f.submit 'Save'

のlatitudeとlongitudeの項目を消します。
これで完成です！

最後に

間違っているところがあったら教えてください…

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Railsで投稿した内容をGoogleMap上にmarkerで表示させる方法

はじめに

環境

目次

GoogleMapsのKEYを取得

簡単なアプリを作成しgooglemapをアプリ上に表示させる

投稿機能を作り軽度、緯度取得

最後に