MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.07.02

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

Marker

みなさん、こんにちは!

今回は、 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種類の矢印形状を指定することができます。

名前説明
google.maps.SymbolPath.CIRCLE
google.maps.SymbolPath.BACKWARD_CLOSED_ARROWすべての辺が閉じている後方を指す矢印
google.maps.SymbolPath.FORWARD_CLOSED_ARROWすべての辺が閉じている前方を指す矢印
google.maps.SymbolPath.BACKWARD_OPEN_ARROW1 つの辺が開いている後方を指す矢印
google.maps.SymbolPath.FORWARD_OPEN_ARROW1 つの辺が開いている前方を指す矢印

 

さらに、簡単な図形であれば下記のように、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>

 

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

Full Screen

 

まとめ

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

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

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

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

5. 写真を使用する

 

 

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

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

MarkerClustererライブラリの紹介

 

 

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

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

 

では、今日はこの辺で。

バイ

 

 

【関連記事】こんな記事も読まれています

2017.02.07

Google Maps 無償版の利用制限について

みなさん、こんにちは:)

今日は、お客さまからの問い合わせが多い Google Maps APIs の無償版(スタンダードプラン)の利用制限に・・・

続きを読む

2016.08.25

Googleマップで過去の航空写真を見る

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマップに国・・・

続きを読む

2016.07.24

スタイルマップを使用して地図の雰囲気を変えてみる

みんさん、こんにちは!

いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね? 実はグーグルマップ・・・

続きを読む

 - Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)