Advanced Search

google maps v3 rectangle

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // init
  2.         // Plot two markers to represent the Rectangle's bounds.
  3.         marker1 = new google.maps.Marker({
  4.           map: map,
  5.           position: new google.maps.LatLng(65, -10),
  6.           draggable: true,
  7.           title: 'Drag me!'
  8.         });
  9.         marker2 = new google.maps.Marker({
  10.           map: map,
  11.           position: new google.maps.LatLng(71, 10),
  12.           draggable: true,
  13.           title: 'Drag me!'
  14.         });
  15.  
  16.         // Allow user to drag each marker to resize the size of the Rectangle.
  17.         google.maps.event.addListener(marker1, 'drag', redraw);
  18.         google.maps.event.addListener(marker2, 'drag', redraw);
  19.  
  20.         // Create a new Rectangle overlay and place it on the map.  Size
  21.         // will be determined by the LatLngBounds based on the two Marker
  22.         // positions.
  23.         rectangle = new google.maps.Rectangle({
  24.           map: map
  25.         });
  26.         redraw();
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.        function redraw() {
  35.         var latLngBounds = new google.maps.LatLngBounds(
  36.           marker1.getPosition(),
  37.           marker2.getPosition()
  38.         );
  39.         rectangle.setBounds(latLngBounds);
  40. 		//console.log(marker1.getPosition()+","+marker2.getPosition());
  41.       }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.