Help us understand the problem. What is going on with this article?

【Rails】google mapを表示させよう

概要

今回はGoogleMapを任意のビューに表示させる方法について解説します

準備

ビューファイルとgoogle mapのAPIキーを準備しましょう

APIキー

公式サイト(https://console.developers.google.com/?hl=ja )から手順に沿ってAPIキーを取得しましょう
今回は省略します

ビュー

<div id="map" style="width: 500px;height: 350px;"></div>

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
</script>

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

解説、始めます!!!

var map;
まず、マップの変数を定義します
new google.maps.Map(document.getElementById('map')
そしてマップをビューのidがmapの要素に生成します
center: {lat: -34.397, lng: 150.644},表示させるマップの中心を設定します
zoom: 8マップの倍率を設定します
公式ドキュメントによると
1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings
が基準のようです
参考に設定してみてください

最後に
APIキーの部分に個人で取得したAPIキーを代入してください!!

これで表示が完璧です!!

他にもピン留め、ピンからウィンドウを表示させたり、地名や建物名から検索もできます!!
色々やってみましょう!!

質問、気になるところなどございましたらコメントよろしくお願いします

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away