Google Maps Rectangle editable: how to block (fixed) height from editing

Question

I have a Google map, it has a rectangle in it that you can edit, move and resize, etc. What I'm looking for is a way to block the given height of a rectangle so that only the width can be changed.

Answer 1

You can prevent the rectangle from being resized in height by using the bounds_changed event in JavaScript.

Here is the working jsfiddle: http://jsfiddle.net/h7ee4368/

Rectangle api link: https://developers.google.com/maps/documentation/javascript/reference?hl=de#Rectangle

JavaScript src:

var rectangle; var originalBounds; var map; function initialize() { var mapOptions = { center: new google.maps.LatLng(44.5452, -78.5389), zoom: 9 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var bounds = new google.maps.LatLngBounds( new google.maps.LatLng(44.490, -78.649), new google.maps.LatLng(44.599, -78.443) ); originalBounds = bounds; // Define the rectangle and set its editable property to true. rectangle = new google.maps.Rectangle({ bounds: bounds, editable: true, draggable: true }); rectangle.setMap(map); // Add an event listener on the rectangle. google.maps.event.addListener(rectangle, 'bounds_changed', boundsChangedCb); } var skipBoundsChangedCb = false; function boundsChangedCb(event) { if(skipBoundsChangedCb) return; var ne = rectangle.getBounds().getNorthEast(); var sw = rectangle.getBounds().getSouthWest(); var origNe = originalBounds.getNorthEast(); var origSw = originalBounds.getSouthWest(); //avoid recursion skipBoundsChangedCb = true; rectangle.setBounds(new google.maps.LatLngBounds( new google.maps.LatLng(ne.lat() - origNe.lat() + origSw.lat(), sw.lng()), ne )); skipBoundsChangedCb = false; origNe = ne; origSw = sw; } google.maps.event.addDomListener(window, 'load', initialize);