Google Maps API を使ってみる

2015.08.15

Google Maps JavaScript APIを使って、地図やマーカー、吹き出しなどの表示を試してみます。

地図の表示

Google Maps APIで地図を表示してみます。

HTML

地図を配置する場所(#map内)を用意します。

<div id="map"></div>

</body>の直前にJavaScriptを読み込ませます。

<script src="./sample.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Google Maps APIは2行目で読み込んでいます。
URLにパラメータでcallback=initMapを付与して、APIが読み込まれたらinitMap()という関数を実行するようにしています。
initMap()は1行目のsample.js内で記述します。

CSS

地図のサイズを指定します。

#map {
	width: 600px;
	height: 400px;
	margin: 0 auto;
}

JavaScript

sample.js内にinitMap()を記述しておきます。

var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15 // 地図のズームを指定
	});
}

地図の表示のデモページ
　

new google.maps.Map(element, options) 指定したオプションで新しい地図を作成。
optionsはcenterとzoomの設定が必須。
center: {lat: latitude, lng: longitude} 地図の中央位置を緯度と経度で指定。
zoom: num 地図のズームを指定。

mapsの他のオプションはこちら

　

コントローラーの表示切り替え

地図周りのコントローラーの表示を切り替えてみます。

JavaScript

var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15, // 地図のズームを指定

		disableDefaultUI: true // ズームなどのデフォルトのUIを無効にする
	});
}

コントローラーを無効にするデモページ
　

disableDefaultUI: boolean ズームなどのデフォルトのUIを無効にするかどうか指定。
初期値はfalse。

　

上記では全体を無効にしていましたが、個別に表示・非表示を切り替えることもできます。

JavaScript

var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15, // 地図のズームを指定

		panControl: false, //上下左右のコントロールを表示するかどうか
		zoomControl: false, //ズームのコントロールを表示するかどうか
		mapTypeControl: true, // マップのタイプ切り替えを表示するかどうか
		scaleControl: false, // 地図の縮尺要素を表示するかどうか
		streetViewControl: false, // ストリートビュー表示のアイコンを表示するかどうか
		overviewMapControl: true, // 地図右下に広域表示のアイコンを表示するかどうか
	});
}

コントローラーの表示を個別に設定するデモページ
　

panControl: boolean 上下左右のコントロールを表示するかどうか指定。
初期値はtrue。
zoomControl: boolean ズームのコントロールを表示するかどうか指定。
初期値はtrue。
mapTypeControl: boolean マップのタイプ切り替えを表示するかどうか指定。
初期値はtrue。
scaleControl: boolean 地図の縮尺要素を表示するかどうか指定。
初期値はfalse。
streetViewControl: boolean ストリートビュー表示のアイコンを表示するかどうか指定。
初期値はtrue。
overviewMapControl: boolean 地図右下に広域表示のアイコンを表示するかどうか指定。
初期値はfalse。

　

マーカーの配置

マーカーを配置してみます。

JavaScript

var map;
var marker;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15 // 地図のズームを指定
	});

	marker = new google.maps.Marker({
		position: {lat: 35.7100627, lng: 139.8107004}, // マーカーの位置を指定
		map: map // マーカーを配置する地図を指定
	});
}

マーカー配置のデモページ
　

new google.maps.Marker(options) 指定したオプションで地図上にマーカーを作成。
optionsはpositionの設定が必須。
position: {lat: latitude, lng: longitude} マーカーの位置を指定。
mapmap マーカーを配置する地図を指定。

markerの他のオプションはこちら
　

マーカーの表示切り替え・削除

マーカーの表示の切り替えを行ってみます。

HTML

<div id="map"></div>
<button id="marker-hide">マーカーの非表示</button>
<button id="marker-show">マーカーの表示</button>
<button id="marker-del">マーカーの削除</button>

JavaScript

地図をクリックでその場にマーカー配置、ボタンでマーカーの表示を切り替えます。

var map;
var markers = [];
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15 // 地図のズームを指定
	});

	// マップをクリックでその場にマーカー追加
	map.addListener('click', function(e) {
		addMarker(e.latLng); // マーカーの追加
	});

	// マーカーを地図上から非表示にする
	var markerHide = document.getElementById('marker-hide');
	markerHide.addEventListener('click', function() {
		clearMarkers();
	});

	// マーカーを地図上に表示
	var markerShow = document.getElementById('marker-show');
	markerShow.addEventListener('click', function() {
		showMarkers();
	});

	// マーカーの削除
	var markerDel = document.getElementById('marker-del');
	markerDel.addEventListener('click', function() {
		deleteMarkers();
	});
}

function addMarker(location) {
	var marker = new google.maps.Marker({
		position: location, // マーカーの位置を指定
		map: map // マーカーを配置する地図を指定
	});
	markers.push(marker);
}

function setMapOnAll(map) {
	for (var i = 0; i < markers.length; i++) {
		markers[i].setMap(map);
	}
}

function clearMarkers() {
	setMapOnAll(null); // マーカーを地図上から非表示
}

function showMarkers() {
	setMapOnAll(map); // マーカーを地図上に表示
}

function deleteMarkers() {
	clearMarkers(); // マーカーの削除
	markers = [];
}

マーカーの表示切り替え・削除のデモページ
マーカー作成時にmarkersという配列に格納して、マーカーの管理を行っています。
　

marker.setMap(map) mapにマーカーを表示。
mapがnullの場合は非表示。

marker.setMap(null)は単にマーカーを非表示にしているだけなので、削除する場合はmarker自体をnullにする必要があります。
　

マーカーの変更

マーカー内に単一の文字列を表示させたり、違う画像を表示させたりすることもできます。

マーカーに単一の文字列を表示してみます。

JavaScript

var map;
var markers = [];
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15 // 地図のズームを指定
	});

	// マップをクリックでその場にマーカー追加
	map.addListener('click', function(e) {
		addMarker(e.latLng); // マーカーの追加
	});
}

function addMarker(location) {
	var marker = new google.maps.Marker({
		position: location, // マーカーの位置を指定
		map: map, // マーカーを配置する地図を指定
		label: String(markers.length + 1) // マーカーに表示する文字を指定
	});
	markers.push(marker);
}

マーカーに単一の文字列を表示するデモページ
何番目に追加されたマーカーかを表示しています。
　

label: str マーカーに表示する文字を指定。

　

マーカーの画像を変更してみます。

JavaScript

var map;
var markers = [];
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15 // 地図のズームを指定
	});

	// マップをクリックでその場にマーカー追加
	map.addListener('click', function(e) {
		addMarker(e.latLng); // マーカーの追加
	});
}

function addMarker(location) {
	var marker = new google.maps.Marker({
		position: location, // マーカーの位置を指定
		map: map, // マーカーを配置する地図を指定
		icon: 'arrow.png' // マーカーに使用する画像を指定
	});
	markers.push(marker);
}

マーカーの画像を変更するデモページ
　

icon: img マーカーに使用する画像を指定。

　

吹き出し

地図に吹き出し(情報ウインドウ)を表示してみます。

JavaScript

var map;
var marker;
var infowindow;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.7100627, lng: 139.8107004}, // 地図の中央位置を指定
		zoom: 15 // 地図のズームを指定
	});

	marker = new google.maps.Marker({
		position: {lat: 35.7100627, lng: 139.8107004}, // マーカーの位置を指定
		map: map // マーカーを配置する地図を指定
	});

	infowindow = new google.maps.InfoWindow({
		content: '<div>東京スカイツリー</div>' // 吹き出しに表示する内容を指定
	});
	marker.addListener('click', function() {
		infowindow.open(map, marker); // 指定された地図上のマーカーの位置に吹き出しを表示
	});
}

吹き出しのデモページ
　

content: str 吹き出しに表示する内容を指定。
HTMLを含む形も可能。
infowindow.open(map, marker) 指定された地図上のマーカーの位置に吹き出しを表示。

InfoWindowの他のオプションはこちら
　

実際の案件などで使用する場合、Google Developers ConsoleでAPIキーを取得して使用したほうがよいかと思いますが、今回はとりあえず試してみたかっただけなので特に設定せずに使用しています。
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年10月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
2728293031