Google マップ:マーカーをカスタマイズ

Google マップ:マーカーをカスタマイズ

author : koki

publish date :

Google Maps JavaScript API v3を使えばオリジナル感あふれるGoogle マップを作れます!
Google Maps APIで公開されているサンプルを元にカスタマイズの方法を紹介します!

Google Maps JavaScript API v3

Google Maps JavaScript API v3を使えば自分のウェブサイトに簡単にGoogle マップを組み込むことができます。

マーカーのカスタマイズ

さぁさぁ、それでは本題のマーカーのカスタマイズ方法です。
Google Maps JavaScript API v3で紹介されているSimple markersを元にカスタマイズしていきます。

サンプル1

まずは、Google Maps JavaScript API v3で公開されているサンプルをそのまま紹介します。

アイコンが変わってますね!
けど、ズーム インしていくと画像がずれて見えますよね・・・
このズレなんとかならないの?と思ったそこのあなた!そこも設定できるオプションがあります!!!
その設定はオーバーレイの複雑なアイコンで説明されているのですが、複雑なことは後で考えるとして実践あるのみ!

ゴニョゴニョコードを書き換えて・・・
こうするとズレがほぼなくなったと思います。

改良後のサンプル1を別ページで表示

画像の位置を調整する設定方法の説明ですが、こんな説明でいいでしょうかね。

var image = new google.maps.MarkerImage(
    // 画像のパスを指定します
    'images/beachflag.png',
    // 画像のサイズを指定します(width, height)
    new google.maps.Size(20, 32),
    // 画像を表示の起点とする位置を指定します、ほとんどの場合(0, 0)でいいと思います
    new google.maps.Point(0, 0),
    // 画像起点としたいポイントを指定します。この旗の画像の場合は左下が起点となるので(0, 32)となります
    new google.maps.Point(0, 32)
);

サンプル1の改良後のコード

かなり自分好みに書き換えましたが、ある程度汎用性もあるともうので、もしよかったら使いまわしてください!

HTMLコード
<div id="map-canvas2" style="width:100%;height:320px;"></div>
JavaScriptコード
var mapID = 'map-canvas2';
var spot = ['Bondi Beach', -33.890542, 151.274856, 4];
var spotImg = ['/article/data/images/2015-01-30-0/beachflag.png', 20, 32];
var spotImgPos = [0, 32];
var mapOptions = {
	zoom: 4,
	center: new google.maps.LatLng(spot[1], spot[2]),
	mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(mapID), mapOptions);
createMap(map);
/* function */
/** createMap **/
function createMap(map){
	var image = new google.maps.MarkerImage(spotImg[0],
			new google.maps.Size(spotImg[1], spotImg[2]),
			new google.maps.Point(0, 0),
			new google.maps.Point(spotImgPos[0], spotImgPos[1])
		);
		var myLatLng = new google.maps.LatLng(spot[1], spot[2]);
		var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				icon: image,
				title: spot[0],
				zIndex: spot[3]
		});
}

サンプル2

サンプル1の改良後のコードを使えばこんな事もできます。

サンプル2を別ページで表示

サンプル2のコード

HTMLコード
<div id="map" style="width:100%;height:320px;"></div>
JavaScriptコード
var mapID = 'map';
var spot = ['Bondi Beach', -33.890542, 151.274856, 4];
var spotImg = ['/article/data/images/2015-01-30-0/map_pin.png', 98, 58];
var spotImgPos = [49, 58];
var mapOptions = {
	zoom: 4,
	center: new google.maps.LatLng(spot[1], spot[2]),
	mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(mapID), mapOptions);
createMap(map);
/* function */
/** createMap **/
function createMap(map){
	var image = new google.maps.MarkerImage(spotImg[0],
			new google.maps.Size(spotImg[1], spotImg[2]),
			new google.maps.Point(0, 0),
			new google.maps.Point(spotImgPos[0], spotImgPos[1])
		);
		var myLatLng = new google.maps.LatLng(spot[1], spot[2]);
		var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				icon: image,
				title: spot[0],
				zIndex: spot[3]
		});
}

経度、緯度の取得方法

経度、緯度の取得方法ですがツールなどを使って取得していたのですが、Google マップでも普通に取得が可能だということを知ってからはGoogle マップで調べるようにしてます。

Google マップでの経度、緯度の調べ方ですが、まずはGoogle マップにアクセスします。
経度、緯度を取得したい位置にマウスをあわせて右クリックを押すとコンテキストメニューが出てきます。

Google マップコンテキストメニュー

コンテキストメニューにある「この場所について」をクリックを押すと次の画像のようにその場所の情報が出てきます。

表示されている経度、緯度をクリックすると、検索ボックスに座標が記入されるので、そこでコピペすると楽かもしれません。

その他のサンプル

マーカーのカスタマイズ以外にもいろんなサンプルがGoogle Maps JavaScript API v3で紹介されているので、リンクを張っておきます。
いろいろ試してみたいサンプルがありますね!

マーカーアイコン

カスタマイズ方法が分かったけど、オリジナルマーカー作りたくない!っていう方のためにフリーのマーカーアイコンを紹介します。

Free Vector Map Location Pins

個人・商用使用ともに無料で使えるみたいですが、無料で使う場合はアイコンを使用しているページでFree Vector Map Location Pinsへのリンクが必要なようです。

image:Free Vector Map Location Pins