[Google Map API]静的、動的MAP

#導入
Google Maps Platformへ登録する。（公式サイトから「使ってみるをクリック」）
登録には**クレジットカードが必要**になります。
**APIキー**をここで取得できます。
実際のコードにはある程度決まった書き方に自身のAPIキーを書き込むだけでMAPが使えるようになります。
上記の説明はかなりざっくりしているのでよく調べてください。

#静的MAP(Google Map StaticAPI)
##必須パラメータ
それぞれを＆(アンパサンド)でつなげる。
**center**
緯度経度、地名や文字列アドレスえマップの中心を定義する。

文字列のアドレス  　　　→　URLエスケープする　　
`City Hall,New York,NY`　→　`City+Hall,New+York,NY`

**zoom**
マップのズームレベルを定義。
1~20

**size**
マップイメージのサイズを定義
横幅x縦幅

**key**
APIキーの定義

**サンプルコード**
東京タワーの地図が出ます。

```ruby
省略
<body>

  <img src="https://maps.googleapis.com/maps/api/staticmap?center=35.658624,139.745433&zoom=15&size=640x640&key=[YOUR_API_KEY]">

</body>
省略
```

##オプションパラメータ
**scale**
マップイメージのピクセル数のスケールを定義
値
・1　**（初期値）**
・2


**format**
マップイメージのフォーマット定義
値
フォーマット形式　　　説明
png8もしくはpng　　　8ビットのPNG方式**（初期値）**
png32　　　　　　　　32ビットのPNG方式
gif　　　　　　　　　　GIF形式
jpg　　　　　　　　　　JPEG圧縮形式
jpg-baseline　　　　　非プログレッシブJPEG圧縮形式


**maptype**
マップのタイプ定義
値
roadmap　　　　(道路地図)**初期値**
satellite　　　　(衛星画像)
hybrid　　　　　(上記二つの複合タイプ)
terrain　　　　　（地形）


**language**
使用言語の定義
日本語の場合
language=jp


**region**
対象地域の定義
日本の場合
region=JP


**markers**
指定された位置に1つ以上のマーカーお定義する
markersを定義する場合は**center,zoomは定義する必要がない**

markers style
値
size　　normal***(初期値)***・tiny・mid・・small
color 
label　１文字の大文字半角英数英数文字

サンプルコード
２箇所にマーカーそれぞれcolorとlabelは別
それぞれのmarkersにcolor,label,緯度経度を定義している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636508/e9c8e554-53da-960b-d74a-f6c3871079fc.png)

```html
<img src="https://maps.googleapis.com/maps/api/staticmap?size=400x400&zoom=11&markers=color:red%7Clabel:T%7C35.658581,139.745433&markers=color:blue%7Clabel:S%7C35.710063,139.8107&key=[YOUR_API_KEY]">
```

**path**
地図上にパスを描画する
pathを定義する場合は**center,zoomは定義する必要がない**

path style
値
weight　　　パスの太さをピクセル単位で指定する　**初期値5px**
color
fillcolor　　　パスで囲まれるエリアを塗りつぶす色指定
geodesic　　　地球お曲線に沿った線の描画指定　**初期値false**

サンプルコード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636508/86986eba-0df5-810c-e484-00aa95331af8.png)

```html
<img src="https://maps.googleapis.com/maps/api/staticmap?size=400x400&path=color:red%7CTokyo%7COsaka&key=[YOUR_API_KEY]">
```

**visible**
複数の地点が自動で全て表示される
visibleを定義する場合は**center,zoomは定義する必要がない**

**style**
地図の道路、公園などの表示を変更する


**signature**
デジタル署名の定義



#動的MAP(Google Maps Javascript API)
サンプルコード
マップの大きさはCSSで変えられる

```html
<div id="map"></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=[YOUR_API_KEY]&callback=initMap" async defer></script>
```

##オプションパラメータ
**gestureHandling**
スクロール操作に関するオプション
値
gestureHandling：'auto' 　　　　　**(初期値)**greedyとcooperativeを自動で設定
　　　　　　　　　greedy　　　　スクロールでズームする
　　　　　　　　　cooperative　Controlまたはcommandキーを押しながらスクロールでズーム
　　　　　　　　　none　　　　　スクロールの無効　


**Control**
コントロール（ボタンみたいなもの）の表示設定
値
mapTypeControl: true　　　マップタイプコントロールの表示
fullscreenControl: true　　　全画面表示
streetViewControl: true　　　ストリートビュー
zoomControl: true　　　　　　ズーム

disableDefaultUI: true　　全てを非表示
disableDefaultUI: false　　全てを表示


**mapTypeId**
マップのタイプ
値
mapTypeId: 'roadmap'　　初期値
　　　　　　　satellite　　衛星画像
　　　　　　　hybrid　　　　複合タイプ
　　　　　　　terain　　　　　物理マップ