スポンサードリンク

マーカーのアイコン種類を変更する+影指定/Google Maps JavaScript API V3

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

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

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

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

v2は、コチラ

さて、標準アイコンを表示させた地図、これのマーカを変えてみます。 単純にマーカー(アイコン)を変更する場合は、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ファイルマーカのアイコン種類の変更

v3の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+MySQL)で大量にマーカーをしていするなら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

});

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

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

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">