WordPressにGoogle Maps API V3！

Google Maps API V3 の標準マーカのアイコン種類の変更

やはりアイコンの種類をいろいろ変えたいですよね。

取り急ぎ、下記3つメモ。複数マーカーのアイコンを変更するスマートな方法はないでしょうかね。

標準マーカのアイコン種類の変更

（ｖ2は、コチラ）

さて、標準アイコンを表示させた地図、これのマーカを変えてみます。 単純にマーカー（アイコン）を変更する場合は、var marker = new google.maps.Marker　のカッコ内にアイコンのURLを指定すれば、アイコンの変更が可能。

//－－－－－－－－－－－マーカ－－－－－－－－－－－－－

var marker = new google.maps.Marker({

position: new google.maps.LatLng(35.71634, 139.51701),  //★マーカ位置

map: map,

title: ‘小金井公園’,

clickable: true, //★クリック有効無効

icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’ //★マーカ指定

});

• サンプル地図

XMLファイルマーカのアイコン種類の変更

ｖ3のXMLファイル読み込み表示させた、このサンプルマップ、こっちもマーカを変えてみます。 上記と同じ、単純にマーカー（アイコン）を変更する場合は、var marker = new google.maps.Marker　のカッコ内でアイコンのURLを指定すればOK。

//－－－－－－－－－－－マーカ－－－－－－－－－－－－－ var marker = new google.maps.Marker({ icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’ //★マーカ指定 });

• サンプル地図

複数マーカのアイコン種類の変更（1）

複数のマーカーを配置、マーカーの種類とインフォウィンドウの記述を個別に指定してみます。

参照先は；　Googleコード＞Google Maps JavaScript API V3 オーバーレイ＞アイコン＞複雑なアイコン

ここに、アイコンの種類や影の指定方法のサンプルコードがあります。new google.maps.Markeで指定するimageとshadowを個別にvarで指定しておく方法です。スマートな方法ではありませんが、判りやすかったので先ずはこれで理解。

//－－－－－－－－－－－マーカ1－－－－－－－－－－－－－

});

var LatLng1 = new google.maps.LatLng(35.71634, 139.51701);　//★マーカ位置

var contentString1 =

‘小金井公園 ‘+

‘<p><a href=”http://waox.main.jp/news/?page_id=1013″ target=”_blank”>Google Maps API V3 ページ</a></p>';   　//★インフォウィンドウ記述

var infowindow1 = new google.maps.InfoWindow({

content: contentString1

});

var image1 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’,　//★マーカ種類

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

var shadow1 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png’,　　//★マーカ影

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));;

var marker1 = new google.maps.Marker({　　//★マーカ追加

position: LatLng1,

map: map,

title: “小金井公園”,

icon: image1,

shadow: shadow1

});

google.maps.event.addListener(marker1, ‘click’, function() {　　//★クリックアクション

infowindow1.open(map, marker1);

});

//－－－－－－－－－－－マーカ2－－－－－－－－－－－－－

var LatLng2 = new google.maps.LatLng(35.68135, 139.76571);

var contentString2 =

‘東京駅 ‘+

‘<p><a href=”http://waox.main.jp/news/” target=”_blank”>ブログトップページ</a></p>';

var infowindow2 = new google.maps.InfoWindow({

content: contentString2

});

var image2 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/rail.png’,

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

var shadow2 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/rail.shadow.png’,

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));;

var marker2 = new google.maps.Marker({

position: LatLng2,

map: map,

title: “東京駅”,

icon: image2,

shadow: shadow2

});

google.maps.event.addListener(marker2, ‘click’, function() {

infowindow2.open(map, marker2);

• サンプル地図

複数マーカのアイコン種類の変更（2）

マーカー数が少なければいいですが、XMLファイル（PHP+MｙSQL）で大量にマーカーをしていするならGoogle コードのサンプルがいいかも。　「Google マップと PHP/MySQL を使用」のページを参照下さい。以下のような記述。

var customIconsでマーカーのアイコンの種類と影を指定しておいて・・・・・

var customIcons = {

kouen: {

icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’,

shadow: ‘http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png’

},

doubutsu: {

icon: ‘http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.png’,

shadow: ‘http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.shadow.png’

}

};

var marker = new google.maps.Markerを記述する際に、「icon」「shadow」を指定。

var icon = customIcons[category] || {};

var marker = new google.maps.Marker({

map: map,

position: point,

icon: icon.icon,

shadow: icon.shadow,

title: name

});

• サンプル地図

◆アイコンとマーカーの一覧表

公園以外にもいろいろ作成したい場合は、こっちのアイコン（マーカー）一覧表からコピーして変更してみて下さい。 カスタムアイコン用の影は、ここで作成できます。

スポンサードリンク