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 };