function custom_marker(map, lat, lng) {
this.lat_ = lat;
this.lng_ = lng;
this.setMap(map);
}
// OverlayView を継承
custom_marker.prototype = new google.maps.OverlayView();
// draw 処理
custom_marker.prototype.draw = function() {
if (!this.div_) {
// 出力したい要素を生成
this.div_ = document.createElement("div");
this.div_.style.position = "absolute";
this.div_.innerHTML = "<img src='images/custom_marker.png' alt='' />";
var panes = this.getPanes();
panes.overlayLayer.appendChild(this.div_);
}
// 緯度経度を Pixel に変換
var point = this.getProjection().fromLatLngToDivPixel(
new google.maps.LatLng(this.lat_, this.lng_)
);
// 100px ずらす
this.div_.style.left = point.x - 100 + 'px';
this.div_.style.top = point.y - 100 + 'px';
}
// remove 処理
custom_marker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
}
var cm = new custom_marker(map, 35.689487, 139.691706);
2013年4月12日金曜日
Google Map で指定した緯度経度からずらしてアイコンを表示したい
カスタムOverlayViewを使うと出来る。
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿