2013年4月12日金曜日

Google Map で指定した緯度経度からずらしてアイコンを表示したい

カスタムOverlayViewを使うと出来る。
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);

0 件のコメント:

コメントを投稿