2014/03/04

注目度アップ!Google Mapのマーカーを自由にカスタマイズする方法

注目度アップ!Google Mapのマーカーを自由にカスタマイズする方法

簡単に地図が表示できて便利なGoogle Mapですが,マーカーが少し味気ないと思いませんか?
そこで今回はマーカーを自分好みにカスタマイズし,好きな画像を使用して表示する方法をご紹介します.

目次

マーカーの表示方法

Google Mapの簡単な表示方法は,コピペで簡単!Google Mapをサイトに表示する方法を参照してください

マーカーを表示するには,以下の様なオプションを指定します.

//マーカーオプションの指定
var markerOption = {
    position : centerPosition, //マーカーを表示させる座標
    map : googlemap,  //マーカーを表示させる地図
    title : "ホームページ制作スタイル"  //マウスオーバーした際に表示させる文字列
};
 
//マーカー追加
var marker = new google.maps.Marker(markerOption);

これで,よくあるオレンジ色のマーカーを追加することが出来ます.

マーカーのカスタマイズ

マーカーに別の画像を使用するには,下記のようにオプションを変更します.

var markerOption = {
    position : centerPosition, //マーカーを表示させる座標
    map : googlemap,  //マーカーを表示させる地図
    title : "ホームページ制作スタイル"  //マウスオーバーした際に表示させる文字列
    icon : {
	    url : "../aaa/bbb/.jpg", //画像へのパス
	    size : new google.maps.Size(x, y), //表示させる大きさ
	    origin : new google.maps.Point(x, y), //スプライトを使用する場合の画像の座標
	    anchor : new google.maps.Point(x, y) //アンカーの位置
	}
};

このように変更することで,自分好みの画像に変更することが出来ます.

サンプル

まず,通常のマーカーを追加した場合はこのようになります.

そして,画像を変更した場合はこのようになります.

さらに,画像の位置やアンカーの位置を変更した場合はこのようになります.

まとめ

目的地が複数ある場合,ジャンルによってアイコンを変更させれば,ユーザーが場所を視認しやすくなり,ユーザビリティ向上にも繋がります.

さらにカスタマイズしたい場合はGoogle Maps Javascript API V3 Referenceを参考にしてみてください.