google maps v3 rectangle


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



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.