2
0

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 1 year has passed since last update.

Rails 地図を簡単に表示させよう Maps Embed API, iframe, HTML埋め込み編

Last updated at Posted at 2022-06-06

完成スクショ

image.png

機能の概要

投稿ごとに地図を表示させる
表示させる地図は、HTMLの埋め込みで実装

カラムの追加

$ rails generate migration AddDetailsToPost map_emb:string
$ rails db:migrate

投稿時に、Mapの埋め込みを保存させる

new.html.erb
  <div class="field">
    <%= f.label :map_emb %>
    <%= f.text_field :map_emb %>
  </div>
posts_controller.rb
    def post_params
      params.require(:post).permit(~~~~~~~, :map_emb←追加)
    end

埋め込みのHTMLはMapの共有→地図を埋め込む→HTMLをコピーで取得する

image.png

image.png

埋め込み時の大きさを選択することも可能です。
image.png

埋め込んだHTMLを表示させる

index.html.erb
    <% @posts.each do |post| %>
        <%= post.map_emb.html_safe %>
    <% end %>

html_safeを使うことで、文字列をHTMLに変換できます。

完成

意外と簡単に実装可能でした!
お疲れ様でした!

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?