4.テキストマーカー // マーカー生成 4 テキストマーカー var mes1 = '
大庭の史跡
舟地蔵の由来
' ; var customOverlay1 = new myTextBox(map,35.35755217928927, 139.4529390335083,"
■
舟地蔵",mes1); function myTextBox(map, lat, lng, myTxt1,myTxt2) { this.lat_ = lat; this.lng_ = lng; this.txt1_ = myTxt1; this.txt2_ = myTxt2; this.setMap(map); } var currentInfoWindow = null; myTextBox.prototype = new google.maps.OverlayView(); myTextBox.prototype.onAdd = function() { if (!this.div_) { this.div_ = document.createElement( "div" ); this.div_.style.position = "absolute"; this.div_.style.fontSize = "10px"; this.div_.style.width = 90; this.div_.style.textAlign = 'center'; this.div_.style.display = 'inline'; this.div_.style.backgroundColor = '#ffcc99'; this.div_.style.padding = "2px 0px"; this.div_.style.border = "1px solid #000066"; this.div_.innerHTML = this.txt1_; var panes = this.getPanes(); panes.overlayImage.appendChild(this.div_); // panes.overlayLayer.appendChild(this.div_); panes.overlayImage.style['zIndex']= 104; } } myTextBox.prototype.draw = function() { var point = this.getProjection().fromLatLngToDivPixel( new google.maps.LatLng( this.lat_, this.lng_ ) ); this.div_.style.left = (point.x - (this.div_.offsetWidth / 2)) + 'px'; this.div_.style.top = (point.y - (this.div_.offsetHeight / 2)) + 'px'; var that = this; google.maps.event.addDomListener(that.div_, "click", function() { var infowindow = new google.maps.InfoWindow({ content: that.txt2_, position: new google.maps.LatLng( that.lat_, that.lng_ ) }); if (currentInfoWindow) { currentInfoWindow.close(); } //情報ウィンドウを開く infowindow.open(map); currentInfoWindow = infowindow; // alert("クリックしました : "+that.txt2_); }); } 注意点として、mapの変数は、呼び出し側でグローバル変数として定義しないと 情報ウィンドウが開かない!!!