GoogleMapSample5:マーカーのカスタマイズ+クリックで情報ウィンドウ

自作のマーカーも使える。変数を変えれば数種類のマーカーを使い分けることが出来る。

window.onload = function() {

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

var point =new GPoint(-122.1419, 37.4419);
var marker = new GMarker(point,icon);

map.centerAndZoom(point, 4);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function() {
var html = "<strong>Hello!</strong>";
marker.openInfoWindow(html);
});
}
}
<div id="map"><!--GoogleMap--></div>

前で解説している部分は省略。

var icon = new GIcon();
アイコン(オブジェクト)を作成する。

icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
マーカーの画像があるURL。

icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
影の画像があるURL。

icon.iconSize = new GSize(12, 20);
マーカー画像のサイズを設定。横x縦

icon.shadowSize = new GSize(22, 20);
影画像のサイズを設定。横x縦

icon.iconAnchor = new GPoint(6, 20);
アイコンの表示基準点を設定。

icon.infoWindowAnchor = new GPoint(5, 1);
情報ウィンドウの表示基準点を設定。

var marker = new GMarker(point,icon);
マーカーを作成する際に、使うアイコンを指定する。

影はアルファチャンネルのあるpngにしないと透過されない。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください