google map APIの使い方　　html5にgooglemapを表示させる方法

```ruby:環境
テキストエディタ　 :sublime Text
google Chrome

```

###これからやること
google map APlを使って、　htmlに　google mapを表示させる方法を書きます。

1日あたり25,000回以上の読み込みがあり、その状態が90日間以上連続している場合のみお金がかかります。
http://www.site-shokunin.com/blog/other/1347.html


##　google map APlのキー取得

googleでgoogle map APlを調べてください
[google map APl](https://developers.google.com/maps/?hl=ja)のリンク

そしてら図１の画面出てきます。
赤丸のウェブをクリックしてください
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/167576/f6e16172-6115-ab55-333a-01d6ccf09c6f.png)
図１
### キー取得のクリック

次に図２が出てきます。次も赤丸の囲ってあるキー取得をクリックしてください

![screenshot 2.png](https://qiita-image-store.s3.amazonaws.com/0/167576/9d6d6303-b9ea-6717-800f-8d18b403bc4c.png)
図２

次に図３が出てきます。そしたら、create a new projectをクリックしてください。自分は、いくつかやっているの上に出てきます。


![screenshot 3.png](https://qiita-image-store.s3.amazonaws.com/0/167576/f9baa7da-2e48-acea-3a64-edb2d91c25a8.png)
図３

次に図４が出てきます。プロジェクトの名前を記入してください。

![screenshot 4.png](https://qiita-image-store.s3.amazonaws.com/0/167576/b6abf10e-056d-b736-07c2-7472b7944e71.png)
図４

しばらく時間がかかります。図５の画面が出てきます。
APl keyが出てきます。自分は、赤い文字で隠してあるところです。APl keyは、すごく大切です。だからMACならメモ機能とかに、キーをコピーしましょう。これでキー取得は完了です。

![screenshot 5.png](https://qiita-image-store.s3.amazonaws.com/0/167576/a1953173-916a-71ca-ccdd-c4d44b01bcc4.png)

図５

###htmlの作成
テキストエディタを開き、ください　ここでは、index.htmlとしておきます。

```html:index.html
 <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.000, lng: 135.000},
          zoom: 14
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&callback=initMap"
    async defer></script>
  </body>
</html>


```

上のコードをコピーしてください。ポイントは、２つあります。

###一つ目　YOUR_API_KEYの入力

下から５番目のコードのscriptの間に、YOUR_API_KEYと思います。
YOUR_API_KEYは、先ほど取得したAPl keyを入れてください

二つ目は、下から１０番目の

```
center: {lat: 35.000, lng: 135.000}
```
です。このコードで地図の場所を決定しています。具体的に言うと、緯度と経度です。

latが緯度を、lng:経度の数字を記入しています。![screenshot 6.png](https://qiita-image-store.s3.amazonaws.com/0/167576/9004a9a7-7d93-dc64-b38e-933422508cf6.png)




今回は、緯度３５度、経度１３５度にしていて、場所は、日本のへそ公園を出しています。

###　緯度、経度の調べた方

地図を表示するのに、緯度、経度は必要です。下のリンクにアクセスすると、住所や目的地を入れるだけで、緯度、経度が出ます。

https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/coordinates/advanced.html

次の図が出ます。
![screenshot 7.png](https://qiita-image-store.s3.amazonaws.com/0/167576/93334a81-6b56-0a77-053d-01a8eb5fc134.png)

検索のところで、住所や目的地をうってください。
ここでは、京都駅を打ちました。

すると次の図です。
ここで注意点です。緯度経度で二つの表示が出てきます。ここでは、赤い丸で囲ってある１０進法でやってください。
京都駅の場合は、緯度34.985849　経度135.758767ですね。

![screenshot 8.png](https://qiita-image-store.s3.amazonaws.com/0/167576/543973e9-2133-f76c-3917-948c1233894f.png)


京都駅の地図のコードこうなります。



```ruby:index.html
 <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 34.985849, lng: 135.758767
},
          zoom: 14
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>
```

これで終わりです。


参考資料
https://developers.google.com/maps/documentation/javascript/