LoginSignup
4

More than 5 years have passed since last update.

Google Mapsをhamlに埋め込む方法

Last updated at Posted at 2017-05-16

GoogleMapを表示されたい!って思って色々調べているとgmaps4railsっていうgemがあるらしいんだけど、うまくいかなかった
https://github.com/apneadiving/Google-Maps-for-Rails

なので最低限のやり方として埋め込む方法をメモ。

  1. 検索実行後のメニューをクリック
    〒719-1154_岡山県総社市井尻野1968_-_Google_マップ.png

  2. 地図を共有または埋め込むをクリック
    〒719-1154_岡山県総社市井尻野1968_-_Google_マップ.png

  3. 表示したい大きさを選んでURLをコピーする
    〒719-1154_岡山県総社市井尻野1968_-_Google_マップ.png

コードはこちら。
そのままコピペすると、htmlの形式なので%付けて()で囲めばOK!

%div
  %iframe(src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.5500946428474!2d133.7318036152679!3d34.691302780436835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355154eaafef50f3%3A0x1eef346c53839b77!2z44CSNzE5LTExNTQg5bKh5bGx55yM57eP56S-5biC5LqV5bC76YeO77yR77yZ77yW77yY!5e0!3m2!1sja!2sjp!4v1494925004096" width="600" height="450" frameborder="0" style="border:0" allowfullscreen)

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
4