複数のGoogle Mapsをジオコーディングして貼り付けるメモ

2006/12/2 16:47

・head部分でGoogle Maps APIとGoogle AJAX Search APIのスクリプトをインクルード。

・地図を貼り付けたい部分に<div id=”sample1″></div>のようなタグを書く。

・次のようなJavaScriptを外部ファイルに記述してhead部分でインクルード。

var GEOCODING = function(){};
GEOCODING.prototype.zoom = 15;
GEOCODING.prototype.map = "";
GEOCODING.prototype.options = {};
GEOCODING.prototype.init = function(id, width, height, text, address) {
 var self = this;
 self.options.size = new GSize(width, height);
 self.map = new GMap2(document.getElementById(id), self.options);
 self.map.addControl(new GSmallMapControl());
 self.map.addControl(new GMapTypeControl());
 self.geocoding(text, address);
}
GEOCODING.prototype.geocoding = function(text, address) {
 var self = this;
 var glocal = new GlocalSearch();
 if (self.map.isLoaded()) {glocal.setCenterPoint(self.map);}
 glocal.setSearchCompleteCallback(null, function() {
  if (glocal.results.length > 0) {
   var lat = parseFloat(glocal.results[0].lat);
   var lng = parseFloat(glocal.results[0].lng);
   self.map.setCenter(new GLatLng(lat, lng), self.zoom);
   var marker = new GMarker(new GPoint(lng, lat));
   self.map.addOverlay(marker);
   marker.openInfoWindow(document.createTextNode(text));
  }
 });
 glocal.execute(address);
}

・</body>タグの直前(もしくはprototype.jsのEvent.observe(window, “load”, funtion(){…})を使ってもよい)で読み込むJavaScriptファイルを用意し、以下のような処理を書く。

// 配列にしておけば同一ページに複数の地図を埋め込める
var geo_id = [];
var geo_width = [];
var geo_height = [];
var geo_text = [];
var geo_address = [];

geo_id.push("sample1");
geo_width.push(350);
geo_height.push(280);
geo_text.push("サンプルです");
geo_address.push("甲子園");

geo_id.push("sample2");
geo_width.push(300);
geo_height.push(300);
geo_text.push("これもサンプルです");
geo_address.push("六本木ヒルズ");

if (geo_id.length > 0) {
 for (var i = 0; i < geo_id.length; i++) {
  if (document.getElementById(geo_id[i])) {
   var geocoding = new GEOCODING();
   geocoding.init(geo_id[i], geo_width[i], geo_height[i], geo_text[i], geo_address[i]);
  }
 }
}

・地図を追加したいときは、id付きのdivタグをページに埋め込んで、geo_idなどの配列にデータをpushするだけ。

ただ、マーカーの吹き出しが1個しか開かない場合がある。原因不明。