##はじめに
Maps JavaSctipt APIを使用することで、JavaScript上で独自の画像やコンテンツを使ってカスタマイズしたGoogleマップを画面に描画できたり、Googleマップ上にマーカーを表示したりなど、マップの幅をグッと広げることができます。
Maps JavaScript APIのリファレンスを参照すれば色々な使い方やできることができることがわかると思いますが、今回は、基本となる、Google Mapを画面に描画させる方法を紹介します。
##コード紹介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<style>
#target {
width: 600px;;
height: 400px;
}
</style>
</head>
<body>
<div id="target"></div>
<script src="https://maps.googleapis.com/maps/api/js?language=ja®ion=JP&key=[自分のAPIキー]&callback=initMap" async defer>
</script>
<script src="js/main.js"></script>
</body>
</html>
'use strict'
let map
let target = document.getElementById('target')
function initMap(){
// google.map.Mapクラス呼び出し
map = new google.maps.Map(target, {
// マップの中心を指定
center:{
lat:1.283653,
lng:103.859108
},
// マップの初期ズームレベル
zoom:15
});
}
とすると、
このようにGoogle Mapが表示されます。
簡単な操作手順は以下の通りです。
######※コードを書く前に
Google Maps APIを使用するために、請求先アカウントの設定が必要になります。(少しの使用なら無料で使えるので支払う心配はありません、詳しくは調べてみてください。)API Consoleで作成したプロジェクトに対して請求先アカウントを紐付けてください。プロジェクトの作成は、最後にあります[Maps JavaScript APIを取得する方法]で説明しています。
######HTML
-
htmlでは、マップを入れ込むための要素を
divで作り、JSで操作しやすいようid属性を設定しています。 -
scriptタグを使用してMapsJavaScriptAPIをロードします。コードないの[自分のAPIキー]の部分に取得したAPIキーを記入します。APIの取得方法は、最後に記載しています。 -
scriptタグのsrc属性にcallback=initMapとすることで、init関数を呼び出しています。
######JS
-
initMap関数内で、google.map.Mapクラスを呼び出しています。このクラスを使用することで、指定されたHTML要素内にマップを作成します。
第一引数にはマップを埋め込む場所（今回は```id=targetのdiv````)、第二引数には、マップに関するオプション(MapOptions)を関数で渡しています。 -
MapOptionsには様々なプロパティがあります。
centerは、表示されるマップの中心を緯度と経度でしてするためのプロパティです。zoomはマップの初期ズームを指定できます。0から始まり、数が大きくなるごとに拡大されていきます。
以上がGoogle Mapを画面に描画させる方法になります。
######Maps JavaScript APIを取得する方法
-
Google Developers Consoleから、[プロジェクトを作成する]を選択します。
-
プロジェクト名、を指定し、[作成]ボタンを押して、プロジェクトを作成します。
-
Maps JavaScript APIを有効にするために、[[Google Cloud Platform]]
(https://console.cloud.google.com/home?hl=ja&project=massive-anagram-308701)→[ナビゲーションメニュー]→[APIとサービス]→[APIとサービスの有効化]から、APIライブラリを開きます。 -
「Maps JavaScript API」を選択肢、[有効にする]ボタンを押し、APIを有効にします。
-
[ナビゲーションメニュー]→[APIとサービス]→[認証情報]→[APIキーを作成]とすることで、APIキーを取得することができます。