Google Maps JavaScript API V3のオーバーレイについて

Google Maps API V3のオーバーレイについて

今日はオーバレイの概要からグラウンドオーバーレイまでをいっぺんに追加してみる。

ガイドを読むとマーカーやポリゴン、特殊なオーバレイなど、いろいろ追加できるとわかる。

中心座標は鯖江市に。その他周辺の位置にマーカー（西山公園、バウンドあり）、ポリゴン（鯖江市役所）、ポリライン（日野川）、グラウンドオーバレイ（三里山周辺）を追加してみた。


いやー、地図にお絵かきっていうか、強調できるんは見た目が良いね。

しかし、グラウンドオーバレイだけどGeoTiffがそのまんま載らないんだろうか？？
座標指定は少し面倒かも。

ソースはこんな感じ。
----


var map;

//中心マーカー
var markerCenter;

//座標一覧
var sabae = new google.maps.LatLng(35.956456640995, 136.184343521004);
var nishiyama =  new google.maps.LatLng(35.9503251123204,136.180942894631);
var hinogawaCoords = [
    new google.maps.LatLng(35.9897759546115, 136.15671113723),
    new google.maps.LatLng(35.9853856717707, 136.162285932402),
    new google.maps.LatLng(35.9815857769293, 136.161750182866),
    new google.maps.LatLng(35.9756918011123, 136.166577568652),
    new google.maps.LatLng(35.9699038673229, 136.167335901891),
    new google.maps.LatLng(35.9641308759822, 136.170528533681),
    new google.maps.LatLng(35.9569492233219, 136.169862235689),
    new google.maps.LatLng(35.9523142130165, 136.172431655142)
    ];
var sabaecityofficeCoords =  [
    new google.maps.LatLng(35.9567998750009, 136.183631711986),
    new google.maps.LatLng(35.9568217304901, 136.184321483492),
    new google.maps.LatLng(35.9566640492796, 136.18515405538),
    new google.maps.LatLng(35.9560162933907, 136.184842693366),
    new google.maps.LatLng(35.9560999244364, 136.18382370694)
    ];
var sundome = new google.maps.LatLng(35.9305682166893, 136.185652164702);
//グラウンドオーバーレイは右下左上の順番で指定
var sanriyama = new google.maps.LatLngBounds(
    new google.maps.LatLng(35.9259252797054, 136.199470374279),
    new google.maps.LatLng(35.9529052103095, 136.232794487593));
 

//グーグルマップのアイコン
var iconimage1 = 'http://maps.google.com/mapfiles/kml/pal2/icon4.png';

function initialize7() {

  var myOptions = {
    zoom: 13,
    center: sabae,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  };

  map = new google.maps.Map(document.getElementById("map_canvas7"),
      myOptions);

  markerCenter= new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: nishiyama,
    icon: iconimage1
  });
  google.maps.event.addListener(markerCenter, 'click', toggleBounce);

  //ポリライン
  var linePath = new google.maps.Polyline({
    path: hinogawaCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  linePath.setMap(map);

  //ポリゴン
  var polygonPath = new google.maps.Polygon({
    paths: sabaecityofficeCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });
  polygonPath.setMap(map);

  //円
  var circularPath = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    center: sundome,
    radius: 60
  });
  circularPath.setMap(map);

  //グラウンド オーバーレイ
  var map25000 = new google.maps.GroundOverlay(
      "https://lh3.googleusercontent.com/-IfwN3BbkHJw/T-ExJc546YI/AAAAAAAABRc/q2MfssEqRtI/s800/25000test.jpg",
    sanriyama);
  map25000.setMap(map);

}

//中心マーカーのバウンド切り替え
function toggleBounce() {

  if (markerCenter.getAnimation() != null) {
    markerCenter.setAnimation(null);
  } else {
    markerCenter.setAnimation(google.maps.Animation.BOUNCE);
  }
}

google.maps.event.addDomListener(window, 'load', initialize7);


----