HOME ＞ (旧)開発者blog ＞ Google Map API version 3 Overlay Example3

Google Map API version 3 Overlay Example3

※以前別の場所で書いた文章を備忘的に書き記しておきます。

【投稿年月日】2009-11-25　【ジャンル】JavaScript

　「Google Map API version 3 Overlay Example」「Google Map API version 3 Overlay Example2」の続きです。

　今回は、InfoWindow（吹き出し）を表示する際、選択したOverlayを強調してみます。

Google Maps API v3 Example: Overlay4
tika.tisoku.net/overlay/?id=4

　追加されたのは「OverlayBackground(num)」と「OverlayBackgroundNo(num)」。zIndexで表示順を、backgroundで背景色を変更しています。

【ソース】　Google Maps API v3 Example: Overlay4

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps API version3 Example: Overlay4</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 var map = popup = numold = null;
 var overlays = new Array(), popups = new Array();
 function initialize() {
  var myLatlng = new google.maps.LatLng(35.472324, 133.05052);
  var myOptions = {
   zoom: 10,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  AddOverlayData();
  google.maps.event.addListener(map, "dragend", function() {
   ClearOverlay();
   AddOverlayData(1);
  });
 }
 function AddOverlayData(ww) {
  var northEast = map.getCenter();
  northEast = new google.maps.LatLng(northEast.lat()+0.5, northEast.lng()+1);
  var southWest = new google.maps.LatLng(northEast.lat()-1, northEast.lng()-2);
  if(ww!=1) {
   map.fitBounds(new google.maps.LatLngBounds(southWest, northEast));
  }
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for(var i=0; i<10; i++) {
   overlays[i] = new AddOverlay(i, southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
  }
 }
 function AddOverlay(id, lat, lng) {
  this.id_ = id;
  this.lat_ = MathRound(lat);
  this.lng_ = MathRound(lng);
  this.setMap(map);
 }
 AddOverlay.prototype = new google.maps.OverlayView();
 AddOverlay.prototype.draw = function() {
  if(!this.div_) {
   this.div_ = document.createElement("div");
  }
  var div = this.div_;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
  var latlng = new google.maps.LatLng(this.lat_, this.lng_);
  var point = this.getProjection().fromLatLngToDivPixel(latlng);
  div.title = "Point" + this.id_;
  div.style.position = "absolute";
  div.style.left = point.x + "px";
  div.style.top = point.y + "px";
  div.style.fontSize = "10px";
  div.style.width = "60px";
  div.style.lineHeight = "1em";
  div.style.border = "1px solid #666";
  div.style.background = "#fffffe";
  div.id = "overlay" + this.id_;
  div.style.cursor = "pointer";
  var id = this.id_;
  div.innerHTML = "<strong>Point" + id + "</strong>";
  popups[id] = new google.maps.InfoWindow({
   content: "<strong>Point" + id + "</strong><br />(" + this.lat_ + " ," + this.lng_ + ")",
   pixelOffset: new google.maps.Size(30, 0),
   position: latlng
  });
  google.maps.event.addDomListener(div, "click", function() {
   PopInfowidow(id);
  });
 };
 AddOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
 };
 function ClearOverlay() {
  if(overlays.length>0) {
   for(var i=0; i<overlays.length; i++) {
    overlays[i].onRemove();
   }
   overlays = new Array();
  }
  if(popup) {
   popup.close();
  }
 }
 function PopInfowidow(id) {
  OverlayBackground(id);
  popups[id].open(map);
  if(popup) {
   popup.close();
  }
  popup = popups[id];
 }
 function OverlayBackground(num) {
  var dc = document.getElementById("overlay" + num).style;
  dc.zIndex = 1;
  dc.background = "pink";
  OverlayBackgroundNo(num);
 }
 function OverlayBackgroundNo(num) {
  if(numold) {
   var dc = document.getElementById("overlay" + (numold-1)).style
   dc.zIndex = "-200000";
   dc.background = "#fffffe";
  }
  numold = Math.round(num + 1);
 }
 function MathRound(id) {
  var s = 10000;
  return Math.round(id*s)/s;
 }
 function addEvent(obj, evType, fn) {
  if(obj.addEventListener) {
   obj.addEventListener(evType, fn, false);
  }else if(obj.attachEvent) {
   obj.attachEvent("on" + evType, fn);
  }
 }
 addEvent(window, "load", initialize);
</script>
</head>
<body>
<h1>Google Maps API v3 Example: Overlay4</h1>
<div id="map_canvas" style="width:600px; height:350px;"></div>
</body>
</html>


　次に、サイドバーを付けてみることにします。

Google Maps API v3 Example: Overlay5
tika.tisoku.net/overlay/?id=5


　HTMLに「id=map_sidebar」を記述した上で、「AddOverlayData()」に以下のコードを追加しています。
  for(var i=0; i<10; i++) {
   list.push("<li id=\"list" + i + "\"><a href=\"javascript:void(0);\" onclick=\"PopInfowidow(" + i + ")\">Point" + i + "</a></li>");
  }
  document.getElementById("map_sidebar").innerHTML = "<ul>" + list.join("") + "</ul>";
　Google Maps API v3で、サイドバーを付けるのは、思ったよりも簡単でした。

【ソース】　Google Maps API v3 Example: Overlay5

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps API version3 Example: Overlay5</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 var map = popup = numold = null;
 var overlays = new Array(), popups = new Array();
 function initialize() {
  var myLatlng = new google.maps.LatLng(35.472324, 133.05052);
  var myOptions = {
   zoom: 10,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  AddOverlayData();
  google.maps.event.addListener(map, "dragend", function() {
   ClearOverlay();
   AddOverlayData(1);
  });
 }
 function AddOverlayData(ww) {
  var northEast = map.getCenter();
  northEast = new google.maps.LatLng(northEast.lat()+0.5, northEast.lng()+1);
  var southWest = new google.maps.LatLng(northEast.lat()-1, northEast.lng()-2);
  if(ww!=1) {
   map.fitBounds(new google.maps.LatLngBounds(southWest, northEast));
  }
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  var list = new Array();
  for(var i=0; i<10; i++) {
   overlays[i] = new AddOverlay(i, southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
   list.push("<li id=\"list" + i + "\"><a href=\"javascript:void(0);\" onclick=\"PopInfowidow(" + i + ")\">Point" + i + "</a></li>");
  }
  document.getElementById("map_sidebar").innerHTML = "<ul>" + list.join("") + "</ul>";
 }
 function AddOverlay(id, lat, lng) {
  this.id_ = id;
  this.lat_ = MathRound(lat);
  this.lng_ = MathRound(lng);
  this.setMap(map);
 }
 AddOverlay.prototype = new google.maps.OverlayView();
 AddOverlay.prototype.draw = function() {
  if(!this.div_) {
   this.div_ = document.createElement("div");
  }
  var div = this.div_;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
  var latlng = new google.maps.LatLng(this.lat_, this.lng_);
  var point = this.getProjection().fromLatLngToDivPixel(latlng);
  div.title = "Point" + this.id_;
  div.style.position = "absolute";
  div.style.left = point.x + "px";
  div.style.top = point.y + "px";
  div.style.fontSize = "10px";
  div.style.width = "60px";
  div.style.lineHeight = "1em";
  div.style.border = "1px solid #666";
  div.style.background = "#fffffe";
  div.id = "overlay" + this.id_;
  div.style.cursor = "pointer";
  var id = this.id_;
  div.innerHTML = "<strong>Point" + id + "</strong>";
  popups[id] = new google.maps.InfoWindow({
   content: "<strong>Point" + id + "</strong><br />(" + this.lat_ + " ," + this.lng_ + ")",
   pixelOffset: new google.maps.Size(30, 0),
   position: latlng
  });
  google.maps.event.addDomListener(div, "click", function() {
   PopInfowidow(id);
  });
 };
 AddOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
 };
 function ClearOverlay() {
  if(overlays.length>0) {
   for(var i=0; i<overlays.length; i++) {
    overlays[i].onRemove();
   }
   overlays = new Array();
  }
  if(popup) {
   popup.close();
  }
 }
 function PopInfowidow(id) {
  OverlayBackground(id);
  popups[id].open(map);
  if(popup) {
   popup.close();
  }
  popup = popups[id];
 }
 function OverlayBackground(num) {
  var dc = document.getElementById("overlay" + num).style;
  dc.zIndex = 1;
  dc.background = "pink";
  var dcl = document.getElementById("list" + num).style;
  dcl.background = "pink";
  dcl.fontWeight = "bold";
  OverlayBackgroundNo(num);
 }
 function OverlayBackgroundNo(num) {
  if(numold) {
   var dc = document.getElementById("overlay" + (numold-1)).style
   dc.zIndex = "-200000";
   dc.background = "#fffffe";
   var dcl = document.getElementById("list" + (numold-1)).style
   dcl.background = "#fffffe";
   dcl.fontWeight = "normal";
  }
  numold = Math.round(num + 1);
 }
 function MathRound(id) {
  var s = 10000;
  return Math.round(id*s)/s;
 }
 function addEvent(obj, evType, fn) {
  if(obj.addEventListener) {
   obj.addEventListener(evType, fn, false);
  }else if(obj.attachEvent) {
   obj.attachEvent("on" + evType, fn);
  }
 }
 addEvent(window, "load", initialize);
</script>
</head>
<body>
<h1>Google Maps API v3 Example: Overlay5</h1>
<div id="map_canvas" style="width:600px; height:350px; float:left;"></div>
<div id="map_sidebar" style="width:100px; height:350px; float:left;"></div>
<br style="clear:both;" />
</body>
</html>

HOME ＞ (旧)開発者blog ＞ Google Map API version 3 Overlay Example3

EDIUNET | PHP/MySQL | 独り言 | 提供サービス | JavaScript