#導入
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キーの定義
サンプルコード
東京タワーの地図が出ます。
省略
<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,緯度経度を定義している。
<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
サンプルコード
<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で変えられる
<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 物理マップ