Googleマップ API•テック

Google Maps（グーグルマップ）の設定の仕方

2020年12月19日 by single コメントはまだありません

Google Mapsって便利ですよね。自分のホームページに組み込めたらって思いますよね。

そこで、Google Mapsの組み込み方やいくつかのテクニックやコーディングを紹介していこうと思います。

実は、Google Maps APIを利用するには事前準備が必要です。こちらの『Google Maps Platform（グーグルマップ）の導入方法（準備編）』という記事をご参照ください。

また、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Contents

1 Google Maps（グーグルマップ）の設定の仕方
- 1.1 皇居を中心としたマップ
- 1.2 皇居を中心としたマップのHTMLコード
  - 1.2.1 デモページ
2 コードの説明
- 2.1 Google Maps JavaScript API 読み込み
  - 2.1.1 必須パラメータ
  - 2.1.2 任意パラメータ
- 2.2 DIVの「map_canvas」にGoogleマップを展開
3 Google Maps APIキーの取得方法
4 ご参考
- 4.1 関連ページ

Google Maps（グーグルマップ）の設定の仕方

以下のようなマップを作っていきましょう。

皇居を中心としたマップ

皇居を中心としたマップのHTMLコード

<!DOCTYPE html>
<html>
<head>
	<title>Simple Map</title>
	<script defer
	    src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap">
	</script>
	<style type="text/css">
		#map_canvas {
			width: 100%;
			height:300px;
		}
		html,
		body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
		var map;

		function initMap() {

			map = new google.maps.Map(
				document.getElementById("map_canvas")
				, {
				  center: { lat: 35.68517826190777, lng: 139.7528236934712},
				  zoom: 15,
			}
			);

		}
	</script>
</head>
<body>
	<div id="map_canvas"></div>
</body>
</html>

デモページ

デモページ

コードの説明

Google Maps JavaScript API 読み込み

まず最初にGoogle Maps JavaScript APIを読み込みましょう。以下のコードを追加してください。

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

必須パラメータ

key：APIキーの文字列を指定してください。取得方法はここをご確認ください。
callback：コールバック関数の指定となります。APIをロード後、実行されるJavascript関数を指定してください。サンプルだと「initMap」という関数を呼び出すようにしてあります。

そのほかにも『language』（表示言語）や『v』（Google Maps APIバージョン）などのパラメータがあります。

任意パラメータ

v : 使用するGoogle Maps APIのバージョン
libraries : ロードするMaps Javascript APIのライブラリをカンマ区切りで指定する
language : マップで使用される言語（日本語：ja、英語：enなど）。サポートされている言語の一覧はこちらになります。
region : 地図が使用される地域コードを指定します。地域によって表示されるマップの振る舞いが変わるそうです。詳細はこちらになります。

レファレンスは、以下のページを参照ください。

Maps JavaScript API URL Parameters

DIVの「map_canvas」にGoogleマップを展開

Google Maps APIロード後、DIV領域に、Googleマップを展開するようにします。GoogleマップをDIVに展開するコードが以下のようになります。

<script>
	var map;
	function initMap() {
		map = new google.maps.Map(
			document.getElementById("map_canvas")
			, {
			  center: { lat: 35.68517826190777, lng: 139.7528236934712},
			  zoom: 15,
		}
		);
	}
</script>

と、展開されるべきDIV領域。