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 件のコメント:
コメントを投稿