Avatar of mhdi
mhdi asked on

Google Maps Javascript - Add listener to user created rectangle

Hi,

I have a google map that creates a rectangle when a user clicks on the map.

I now want to add a dblclick listener that removes the rectangle when a user double clicks on it. However because the rectangles are dynamically created, I do not know how to reference to them.

Any ideas?

http://jsbin.com/EXemIzU/1/edit?html,output

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Map</title>
	<script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry" type="text/javascript"></script>
</head>

<body class="" onload="load()" onunload="GUnload()">

		<div id="map" style="position:absolute; width: 1000px; height: 800px"></div>
</body>

<script type="text/javascript">

var rectangle;

function load() 
	{
			var latLng = new google.maps.LatLng(-37.799852,144.939823);
      
			map = new google.maps.Map(document.getElementById("map"),
			{
					center: latLng,
					zoom: 14,
					mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			);

			 google.maps.event.addListener(map, 'click', function (event) 
			 {
                 var bounds = makeBounds(event.latLng, 400, 400 );  //get bounds of rectangle 400high 400 wide.
                 placeRec(bounds);
			 });
    }
	
  //Draw rectangle based on bounds
	function placeRec(bounds) {
			rectangle = new google.maps.Rectangle({
				strokeColor: '#FF0000',
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: '#FF0000',
				fillOpacity: 0.35,
				map: map,
				editable:true,
				bounds: bounds
			  });
	  }
	
    //makeBounds creates LatLngBounds based on 1 latlng point.
	function makeBounds(nw, metersEast, metersSouth ) {
		var ne = google.maps.geometry.spherical.computeOffset(nw, metersEast, 90);
		var sw = google.maps.geometry.spherical.computeOffset(nw, metersSouth, 180);
		return new google.maps.LatLngBounds( sw, ne );
	}

</script>
</html>

Open in new window

JavaScriptWeb Languages and Standards

Avatar of undefined
Last Comment
mhdi

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
mhdi

Thankyou. Much simpler then I thought it was going to be.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck