マルティスープ
Staff Blog

2017.07.02

Googleマップに色々なマーカーを描画する方法

みなさん、こんにちは！

今回は、 Google マップ上に色々なマーカーを描画する方法を説明したいと思います。

通常、マーカを描画するときはアイコンを指定しますが、何も指定しないとGoogleマップ標準のアイコンが描画されます。

var marker = new google.maps.Marker({
	map: _map,
	position: new google.maps.LatLng(35.693235, 139.757864),
	animation: google.maps.Animation.DROP
});

次に、自作のアイコンを指定する方法です。下記のようにアイコンのURLとサイズを指定してください。

var marker = new google.maps.Marker({
	map: _map,
	position: new google.maps.LatLng(35.693235, 139.757864),
	animation: google.maps.Animation.DROP,
	icon: {
		url: 'img/pin.png',                      //アイコンのURL
		scaledSize: new google.maps.Size(40, 40) //サイズ
	}
});

また、アイコンは作りたくない、ただの丸で良いという方は、以下の方法もあります。

icon 内の path に「google.maps.SymbolPath.CIRCLE」を指定してください。

var marker = new google.maps.Marker({
	map: _map,
	position: new google.maps.LatLng(35.692235, 139.759864),
	animation: google.maps.Animation.DROP,
	icon: {
		fillColor: "#FF0000",                //塗り潰し色
		fillOpacity: 0.8,                    //塗り潰し透過率
		path: google.maps.SymbolPath.CIRCLE, //円を指定
		scale: 16,                           //円のサイズ
		strokeColor: "#FF0000",              //枠の色
		strokeWeight: 1.0                    //枠の透過率
	},
	label: {
		text: 'A',                           //ラベル文字
		color: '#FFFFFF',                    //文字の色
		fontSize: '20px'                     //文字のサイズ
	}
});

円以外に下記4種類の矢印形状を指定することができます。

さらに、簡単な図形であれば下記のように、path に座標を指定しアイコンとして描画することもできます。

var marker = new google.maps.Marker({
	map: _map,
	position: new google.maps.LatLng(35.693235, 139.760864),
	animation: google.maps.Animation.DROP,
	icon: {
		path: 'M -8,-8 8,8 M 8,-8 -8,8',     //座標（×）
		strokeColor: "#000000",              //線の色
		strokeWeight: 4.0                    //線の太さ
	}
});

最後に、最近よく見る写真をアイコンにするパターンです。さらに丸のかたちにトリムします。

var marker = new google.maps.Marker({
	map: _map,
	position: new google.maps.LatLng(35.693235, 139.760864),
	animation: google.maps.Animation.DROP,
	icon: {
		url: 'cat.jpg',
		scaledSize: new google.maps.Size(40, 40)
	},
	optimized: false             //★写真を丸くするために「false」を指定する
});

上記だけだと、四角い写真が表示されてしまいますが、以下のように CSS を定義すれば丸くなります！

<style>
    .gm-style img[src='cat.jpg'] { border-radius:50%; !important }
</style>

では、実際に地図上に描画してみました。

まとめ

1. Google Map標準のアイコンを使用する

2. アイコン画像を作成して使用する

3. Google Mapで定義された円や矢印図形を使用する

4. 座標を指定して図形を描画して使用する

5. 写真を使用する

マーカーが重なって見えづらい！

マーカーを地図上にたくさん描画すると重なって見えない！ という方は、以下のページで紹介している「MarkerClustererライブラリ」をご活用ください。

MarkerClustererライブラリの紹介

マルティスープでは、アイコン素材をダウンロードするページも作成しています！！ フリーでご利用いただけますので、ご活用ください。

フリー素材アイコンのダウンロードページ

では、今日はこの辺で。

バイ