diff --git a/mapstractor.css b/mapstractor.css index bd9d703..daf8588 100644 --- a/mapstractor.css +++ b/mapstractor.css @@ -80,17 +80,13 @@ html,body { fill:white; } -.controls.top-left input, -.controls.bottom-left input, -.controls.top-left button, -.controls.bottom-left button { +.controls.left input, +.controls.left button { float:left; } -.controls.top-right input, -.controls.bottom-right input, -.controls.top-right button, -.controls.bottom-right button { +.controls.right input, +.controls.right button { float:right; } diff --git a/mapstractor.js b/mapstractor.js index 29cdadf..2e88657 100644 --- a/mapstractor.js +++ b/mapstractor.js @@ -19,7 +19,7 @@ self.clickingTimout = null; mapElement.style.height = '100%'; // Call any functions that are required on page load. - self._positionUI(); + self._createUIWrappers(); self._createOverlay(); // Add listeners to the map object. self.gMap.addListener('click', function(){ @@ -199,21 +199,19 @@ document.body.insertBefore(overlayHTML, document.body.firstChild); self.overlay = document.getElementById("overlay"); }, - _positionUI: function() { + _createUIWrappers: function() { + // Store this as self, so that it is accessible in sub-functions. var self = this; - - self.gMap.controls[google.maps.ControlPosition.TOP_LEFT].push(self._createUIWrapper('controls top-left')); - self.gMap.controls[google.maps.ControlPosition.LEFT_TOP].push(self._createUIWrapper('controls top-left')); - - self.gMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(self._createUIWrapper('controls top-right')); - self.gMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(self._createUIWrapper('controls top-right')); - - self.gMap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(self._createUIWrapper('controls bottom-left')); - self.gMap.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(self._createUIWrapper('controls bottom-left')); - - self.gMap.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(self._createUIWrapper('controls bottom-right')); - self.gMap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(self._createUIWrapper('controls bottom-right')); - + // Create and position all control UI wrapper areas that are on the left side. + self.gMap.controls[google.maps.ControlPosition.TOP_LEFT].push(self._createUIWrapper('controls left')); + self.gMap.controls[google.maps.ControlPosition.LEFT_TOP].push(self._createUIWrapper('controls left')); + self.gMap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(self._createUIWrapper('controls left')); + self.gMap.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(self._createUIWrapper('controls left')); + // Create and position all control UI wrapper areas that are on the right side. + self.gMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(self._createUIWrapper('controls right')); + self.gMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(self._createUIWrapper('controls right')); + self.gMap.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(self._createUIWrapper('controls right')); + self.gMap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(self._createUIWrapper('controls right')); }, _createUIWrapper(className) { var self = this;