Googleマップから長方形を削除

Question

私はGoogle Maps v3（javascript）を使用しています。

<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's 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> 

私の目標は、四角形を削除することです。私はmap.clearを使用しようとしましたが、動作しませんでした。なにか提案を？

Answer 1

google.maps.RectangleクラスにはsetMapメソッドがあります。これにnullを渡すと、四角形が削除されます。 http://code.google.com/apis/maps/documentation/javascript/reference.html#Rectangle

これは、setMapメソッドを呼び出せるように、四角形のインスタンスを周りに置く必要があることに注意してください。再描画関数のローカル四角形変数は、同じlatLngペアを再描画する必要がある場合を除いて、その周囲を保持しません。

Answer 2

すべてのredraw（）コールで、null入力パラメータを持つsetMap（）関数を使用できます。

// 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's 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);