0
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 3 years have passed since last update.

Railsで架空のCafeのHPを作ってみよう!【9日目】『簡単にGoogleMapを導入』編

Posted at

#概要
基本Railsの記法に則り書いていきます!
1から全ての説明ではなく
その中であれ?どうやるの?と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

#設定と準備
・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います!

#9日目の作業内容:round_pushpin:
・ビューの作成

#9日目の気になった箇所:zap:
よく見るGoogleMapを導入したいけど
どうしたらいいだろうか。

#仮説:pushpin:
調べた結果APIKeyを導入したり
色々と設定しないといけないので時間がかかってしまうし
めんどくさい。

#結論:star:
トップページでGoogleMapを動かすことは不可能だが
GoogleMapに遷移してもらう方法を取ると
簡単に実装が可能!

まずGoogleMapに行き、自分で好きなポイントを選択!
23ec4248b89f917bdade1b2dac907001.jpeg
今回は左上の検索フォームからアメリカと検索しました!

その次は自分の目的地をクリック!
3e7d8bc83c3e52f3f52556afd2d41103.jpeg
今回目的地がないので
適当な箇所をクリックしました!

そしたら画面下にクリックした場所の詳細が出てきます!
aa9c4da90b71a6287dbdfd57f7af154f.png

この数字の部分をクリックしてください!

すると...

ea5db0af3ad17c39de0c564d6f476fe8.png

目的地(今回は適当にクリックした箇所)の詳細が表示されると思います!

*一度間違えて画像を消してしまったので違う箇所の詳細が出ていますが、
やり方は紹介した通りで問題なく遷移できるかと思いますのでご容赦ください。

そしたら画面左の共有をクリック!
e309970980ca749c153c480702a0f400.jpeg
すると共有リンクが出てくるので
リンクをコピーをクリックしておきます!

そのリンクを実際にコードでリンク先に指定します!

index.html.erb
<%= link_to "GoogleMapへ", "https://goo.gl/maps/1p9XESBtvHu6wZvF7" >

これでGoogleMapの自分の指定した箇所へ遷移させるリンクを作ることが可能に!
APIKeyなどを使っていないので凝ったやり方ではないですが
誰でも簡単にできるかと思いますので
ぜひ試してみてください♩

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