Home/ Questions/Q 798905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T23:02:39+00:00

The included JavaScript snippet is supposed to do the following: As the user clicks

  • 0

The included JavaScript snippet is supposed to do the following:

  1. As the user clicks on the map, initialize headMarker and draw a circle (polygon) around it

  2. As the user clicks inside the circle, initialize tailMarker and draw the path between these two markers

1 is happening as expected. But as the user clicks inside the circle, in the function(overlay,point), overlay is non-null while point is null. Because of this, the code fails to 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}); 
    }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    All you need to do is to set the clickable: false option in the GPolygon constructor of your circle. The following is an example that I used to answer another similar question on 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 of the above example:

    Google Maps Clicking Inside a Polygon

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

    • 0