All geek questions in one place

Click inside the polygon on Google Maps

The included JavaScript snippet should do the following:

  • When the user clicks on the map, initialize headMarker and draw a circle around it (polygon)

  • When the user clicks inside the circle, initialize tailMarker and draw a path between the two markers

1 happens as expected. But as the user clicks inside the circle, in function(overlay,point) , overlay not null, and point is null. Because of this, the code cannot initialize tailMarker.

Can someone tell me a way out.

 GEvent.addListener(map, "click", function(overlay,point) { if (isCreateHeadPoint) { // add the head marker headMarker = new GMarker(point,{icon:redIcon,title:'0'}); map.addOverlay(headMarker); isCreateHeadPoint = false; // draw the circle drawMapCircle(point.lat(),point.lng(),1,'#cc0000',2,0.8,'#0',0.1); } else { // add the tail marker tailMarker = new GMarker(point,{icon:greenIcon,title:''}); map.addOverlay(tailMarker); isCreateHeadPoint = true; // load thes path from head to tail direction.load("from:" + headMarker.getPoint().lat()+ ", " + headMarker.getPoint().lng()+ " " + "to:" + tailMarker.getPoint().lat() + "," + tailMarker.getPoint().lng(), {getPolyline:true}); } });
+4
source share
1 answer

All you have to do is set the clickable: false parameter in the GPolygon constructor of your circle. The following is an example that I used to answer another similar question about stack overflow :

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps Clicking Inside a Polygon</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" type="text/javascript"></script> </head> <body onunload="GUnload()"> <div id="map" style="width: 450px; height: 300px"></div> <script type="text/javascript"> var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, "click", function(overlay, latlng) { var lat = latlng.lat(); var lon = latlng.lng(); var latOffset = 0.01; var lonOffset = 0.01; var polygon = new GPolygon([ new GLatLng(lat, lon - lonOffset), new GLatLng(lat + latOffset, lon), new GLatLng(lat, lon + lonOffset), new GLatLng(lat - latOffset, lon), new GLatLng(lat, lon - lonOffset) ], "#f33f00", 5, 1, "#ff0000", 0.2, { clickable: false }); map.addOverlay(polygon); }); </script> </body> </html>

Screenshot from the above example:

Google Maps Clicking Inside a Polygon

I used diamonds instead of circles because they are easier to draw in API v2. Note that the latlng listener latlng would be null if the polygons were not created using the clickable: false option.

+1
source

Source: https://habr.com/ru/post/1310234/

More articles:


All Articles