[GoogleMapAPI]カスタムアイコンと情報ウィンドウを表示するときの注意


Google Mapでカスタムアイコンを使うときに情報ウィンドウを表示するときにハマったのでメモ。

以下の様なコードの時にエラーになる。
カスタムアイコンを使わないとエラーにはならない。

var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl(1));
map.setCenter(new GLatLng(35.36292,138.731572), 17);

var point = new GLatLng(35.36292,138.731572);
var icon = new GIcon();
icon.image  = "http://www.google.com/intl/en_ALL/mapfiles/arrow.png";
icon.shadow = "http://www.google.com/intl/en_ALL/mapfiles/arrowshadow.png";
icon.iconSize   = new GSize(39,34);
icon.shadowSize = new GSize(39, 34);
icon.iconAnchor = new GPoint(0, 0);
var marker = new GMarker(point, icon);
map.addOverlay(marker);

marker.openInfoWindowHtml('富士山!'); //ここでエラー

解決方法。

var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl(1));
map.setCenter(new GLatLng(35.36292,138.731572), 17);

var point = new GLatLng(35.36292,138.731572);
var icon = new GIcon();
icon.image  = "http://www.google.com/intl/en_ALL/mapfiles/arrow.png";
icon.shadow = "http://www.google.com/intl/en_ALL/mapfiles/arrowshadow.png";
icon.iconSize   = new GSize(39,34);
icon.shadowSize = new GSize(39, 34);
icon.iconAnchor = new GPoint(0, 0);
icon.infoWindowAnchor = new GPoint(15, 0); // ←これ必須
var marker = new GMarker(point, icon);
map.addOverlay(marker);

marker.openInfoWindowHtml('富士山!'); //こんどは大丈夫

関連記事:

  1. Remember the milk(rtm) と Google Calendarを連携させてみた

Comments are closed.