googleマップのピンのカスタム

googleマップのピンをマスタムすることが出来ます。

まず、iconに、アイコンの設定を記述します。

var icon = new google.maps.MarkerImage( “http://localhost:8100/img/869a1175dc52418410e65a2e056c6ac7.png”, //使用する画像の指定 new google.maps.Size(40, 40), //画像の左端の位置を設定 new google.maps.Point(0, 0), new google.maps.Point(31, 42) //画像の原点の設定 );

以下の関数で、マップ(map_canvas)上にピンを配置します。

function create_marker(lat, lng) { //ピンを配置する位置を引数に設定 var marker_options = { map: map_canvas, //ピンをおくマップを指定 position: new google.maps.LatLng(lat, lng), //ピンを置くマップ上の位置を指定 icon: icon, //カスタムしたアイコンに設定 zIndex: 0 };