GoogleMapにオリジナルマーカーを表示させる

電脳備忘録
今回の課題は「GoogleMapにオリジナルマーカーを表示させる」です。
ちょっと思うところがあって【ブラゴムヲ】のマーカーをオリジナルのものに変更しました。 紆余曲折ありましたが、なんとか自分がやりたいことを実装することが出来ました。
これで先に進むことが出来ますが、忘れないうちに備忘録を残しておこうと思います。

ブラゴムヲ】は先日他ページと体裁を合わせたばかりですが、サンプルとしてデザインを含めサイトをカスタマイズする予定です。

注意点

記述が自分仕様です。何かのヒントにでもなれば幸いですが、参照は自己責任でお願いします。

修正したところ

ページ表示時にアイコンを表示させるための[googlemap.js]の内容を修正

修正前

//省略
function addMarker(lat, long, html){
var marker = new GMarker(new GLatLng(lat, long));
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
}

修正後

アイコンを表示させるための処理を追記しています。
//省略
//表示させるアイコンのURLとサイズを指定
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "./mapicon.png";
icon.iconSize = new GSize(30, 44);
icon.iconAnchor = new GPoint(0, 30);
function addMarker(lat, long, html){
var marker = new GMarker(new GLatLng(lat, long),icon); //iconを追記
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
}
メニュークリック時にアイコンを表示させるための[googlemap_list.js]の内容を修正

修正前

//省略
// ===== マーカーとフキダシ。name がサイドバー表示、html がフキダシの指示 =====
function createMarker(point, name, html, address, tel) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html + '
' + address + '
' + tel); }); gmarkers[i] = marker; htmls[i] = html + '
' + address + '
' + tel; sidebar_html += '' + name + '<\/a>
' + address + '
' + tel + '

'; i++; return marker; } //省略

修正後

//省略
// ===== マーカーとフキダシ。name がサイドバー表示、html がフキダシの指示 =====
//表示させるアイコンのURLとサイズを指定
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "http://www.560days.com/mt-static/themes/560days/img/jojo01.png";
icon.iconSize = new GSize(30, 44);
icon.iconAnchor = new GPoint(0, 30);
function createMarker(point, name, html, address, tel) {
var marker = new GMarker((point),icon); //iconを追記
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html + '
' + address + '
' + tel); }); gmarkers[i] = marker; htmls[i] = html + '
' + address + '
' + tel; sidebar_html += '
' + name + '<\/a>
' + address + '
' + tel + '

'; i++; return marker; } //省略
ブラゴムヲをみてみるとおかしなアイコンが表示されたのですが、フキダシが無効になってしていてはまりました。結局ネットを彷徨いなんとか解決できました。きっと記述がアレなのだと思いますが、とりあえず今回はよしとします・・・

注意

下記のように記述することでとりあえずフキダシが有効になるようです。参照は自己責任でお願いします。

var icon = new GIcon();

var icon = new GIcon(G_DEFAULT_ICON);

広告

ブログの維持費に充てるでございます・・・。