Remove Rectangle from Google Maps

Question

I am using Google Maps v3 (javascript). I draw a rectangle as follows when I load my map:

<script type="text/javascript"> // Global variables var map; /** * Called on the initial page load. */ function init() { map = new google.maps.Map(document.getElementById('map'), { 'zoom': 6, 'center': new google.maps.LatLng(41.87194,12.567379999999957), 'mapTypeId': google.maps.MapTypeId.ROADMAP }); //Region Overlay var latLng1; var latLng2; <?php foreach ($this->arrRegion as $region) { ?> latLng1 = new google.maps.LatLng(<?php echo $region['boundLat1_region']; ?>,<?php echo $region['boundLng1_region']; ?>); latLng2 = new google.maps.LatLng(<?php echo $region['boundLat2_region']; ?>,<?php echo $region['boundLng2_region']; ?>); redraw(latLng1,latLng2); <?php }?> } /** * Updates the Rectangle bounds to resize its dimensions. */ function redraw(latLng1,latLng2) { var latLngBounds = new google.maps.LatLngBounds(latLng1,latLng2); // Create a new Rectangle overlay var rectangle = new google.maps.Rectangle({map: map, bounds: latLngBounds}); } // Register an event listener to fire when the page finishes loading. google.maps.event.addDomListener(window, 'load', init); </script> 

Now my goal is to remove the rectangle. I am trying to use map.clear, but this did not work. Any suggestion?

Answer 1

The google.maps.Rectangle class has a setMap method. If you pass null, then the rectangle will be deleted. See http://code.google.com/apis/maps/documentation/javascript/reference.html#Rectangle

Note that this means that you need to maintain instances of your rectangles so that you can call the setMap method. The local rectangle variable in your redraw function will not contain it unless you call redraw again with the same latLng pairs.

Answer 2

You can use the setMap () function with a null input parameter each time redraw () is called.

 // Global variables var map; var rectangle; /** * Called on the initial page load. */ function init() { map = new google.maps.Map(document.getElementById('map'), { 'zoom': 6, 'center': new google.maps.LatLng(41.87194,12.567379999999957), 'mapTypeId': google.maps.MapTypeId.ROADMAP }); //Region Overlay var latLng1; var latLng2; <?php foreach ($this->arrRegion as $region) { ?> latLng1 = new google.maps.LatLng(<?php echo $region['boundLat1_region']; ?>,<?php echo $region['boundLng1_region']; ?>); latLng2 = new google.maps.LatLng(<?php echo $region['boundLat2_region']; ?>,<?php echo $region['boundLng2_region']; ?>); redraw(latLng1,latLng2); <?php }?> } /** * Updates the Rectangle bounds to resize its dimensions. */ function redraw(latLng1,latLng2) { var latLngBounds = new google.maps.LatLngBounds(latLng1,latLng2); // Remove Previous Rectangle if(rectangle) rectangle.setMap(null); // Create a new Rectangle overlay rectangle = new google.maps.Rectangle({map: map, bounds: latLngBounds}); } // Register an event listener to fire when the page finishes loading. google.maps.event.addDomListener(window, 'load', init);