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_ARROW 1 つの辺が開いている後方を指す矢印
google.maps.SymbolPath.FORWARD_OPEN_ARROW 1 つの辺が開いている前方を指す矢印

 

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

 

 

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

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

 

では、今日はこの辺で。

バイ

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2017.02.26

Wi-Fi マックアドレスから位置取得

みなさん、こんにちは。

Google Maps API には様々なAPIがありますが、その中の「続きを読む

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツ・・・

続きを読む

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps・・・

続きを読む

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