var houseSoftMap = { mapObj : null, maxMarkerCount : 0, // 地図に表示するマーカーの数。0ならマーカー追加できない maxRectangleCount : 0,// 地図に表示する長方形の数。0なら長方形追加できない。負の値なら無限に追加できるとする。 markers : [], rectangles : [], // 地図上に表示している長方形を保持。一覧画面への適用を考慮して配列 northInputId : null, southInputId : null, eastInputId : null, westInputId : null, createMap : function (divId, maxMarkerCount, maxRectangleCount, northInputId, southInputId, eastInputId, westInputId) { this.mapObj = new google.maps.Map(document.getElementById(divId), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); this.maxMarkerCount = maxMarkerCount; this.maxRectangleCount = maxRectangleCount; this.setRectangleInputIds(northInputId, southInputId, eastInputId, westInputId); this.mapObj.addListener("click", function(mouseEvent) { if (houseSoftMap.maxMarkerCount <= 0) return; // クリックした位置にマーカーを立てる var marker = new google.maps.Marker({ position: mouseEvent.latLng, map: houseSoftMap.mapObj }); houseSoftMap.addMarker(marker); }); }, setRectangleInputIds(northInputId, southInputId, eastInputId, westInputId) { // 地図で描いた長方形の座標を受け取る部品があれば覚えておく this.northInputId = northInputId; this.southInputId = southInputId; this.eastInputId = eastInputId ; this.westInputId = westInputId ; if (this.northInputId && this.southInputId && this.eastInputId && this.westInputId) { var north = parseFloat(document.getElementById(this.northInputId).value); var south = parseFloat(document.getElementById(this.southInputId).value); var east = parseFloat(document.getElementById(this.eastInputId).value); var west = parseFloat(document.getElementById(this.westInputId).value); if (north >= -180 || south >= -180 || east >= -180 || west >= -180) { this.addRectangle({ north: north, south: south, east: east, west: west }); } } }, addMarker : function(marker) { this.markers.push(marker); // 直近のMaxMarkerCountポイントだけ持つ while (this.markers.length > this.maxMarkerCount) { var firstMarker = this.markers.shift(); firstMarker.setMap(null); // マーカーを地図から削除 } var markerLength = this.markers.length; if (markerLength >= 2) { // 直近2点をとってそれぞれ対角線に取る長方形の緯度・経度を算出して地図に描画 var point1 = this.markers[markerLength - 1].getPosition(); var point2 = this.markers[markerLength - 2].getPosition(); var rectangle = this.getRectangleFrom2Points(point1, point2); this.addRectangle(rectangle); } }, getRectangleFrom2Points : function(point1, point2) { var north, south, west, east; if (point1.lat() < point2.lat()) { north = point2.lat(); south = point1.lat(); } else { north = point1.lat(); south = point2.lat(); } if (point1.lng() < point2.lng()) { east = point2.lng(); west = point1.lng(); } else { east = point1.lng(); west = point2.lng(); } // 今作った長方形の座標を(指定されていれば)Web Screenの部品にセットする this.setRectangleInput(north, south, east, west); return { north: north, south: south, east: east, west: west }; }, setRectangleInput : function(north, south, east, west) { if (this.northInputId && this.southInputId && this.eastInputId && this.westInputId) { document.getElementById(this.northInputId).value = north; document.getElementById(this.southInputId).value = south; document.getElementById(this.eastInputId).value = east; document.getElementById(this.westInputId).value = west; } }, addRectangle : function(rectangle, title) { if (this.maxRectangleCount === 0) return; // 0のときは長方形を表示しないので処理を終了する // 設定値以上に追加されている長方形はクリアする if (this.maxRectangleCount > 0) { // 負の値は長方形を無制限に指定できることにしたので負の値ならクリアしない while (this.rectangles.length > this.maxRectangleCount) { var temp = this.rectangles.shift(); temp.setMap(null); } } var rectangle = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: this.mapObj, bounds: rectangle, title: title }); if (title) { // title属性が指定されているとき、長方形クリックで情報ウィンドウを出す var infoWindow = new google.maps.InfoWindow({ content: title, position: rectangle.getBounds().getCenter() }); rectangle.addListener('click', function() { infoWindow.open(rectangle.map); }); } this.rectangles.push(rectangle); }, setInitialRectangles : function(rectangleArray) { for (var i = 0; i < rectangleArray.length; i++) this.addRectangle({ north: rectangleArray[i].north, south: rectangleArray[i].south, east: rectangleArray[i].east, west: rectangleArray[i].west }, rectangleArray[i].title); } }