CODEWITHSUNDEEP
google-maps-api-3overlay
Ajax
Ajax

Reputation: 606

Google Maps api v3 - circle without fill or unclickable fill

.. and sorry for my english.

I'm trying to create circle without fill with google maps api v3. I know that I can set opacity (and fill disapired), but this no-visible fill is still clickable. I need to set fill unclickable, but stroke have to be clickable. Under my circle there are few points and lines, that have to be clickable and circle is upper, than lines, for example. My idea was move circle to different pane, but I didn't find way how to do it. Is there a solution for it?

Thanks! Ajax

[EDIT]

Here is code sample. My problem is, that I'm not able to click on map or line inside blue circle.

  <!DOCTYPE html>
  <html>
  <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_GMAP+API_KEY&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        var lat = 49;
        var lon = 15;

        var myOptions = {
          center: new google.maps.LatLng(lat,lon),
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, "click", function(clickEvt) {
            alert('mapClicked');
        });

        var line = new google.maps.Polyline({
            path: [new google.maps.LatLng(lat + 0.001, lon + 0.001),new google.maps.LatLng(lat - 0.001, lon - 0.001)],
            strokeColor: '#00FF00',
            map: map
        });

        google.maps.event.addListener(line, "click", function() {
            alert('Line clicked'); 
        });

        var circle = new google.maps.Circle({
            strokeColor: '#0000FF',
            strokeWeight: 2,
            fillOpacity: 0,
            map: map,
            center: new google.maps.LatLng(lat, lon),
            radius: 100
        });


        google.maps.event.addListener(circle, 'click', function(event) {       
            alert('circle clicked');
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Upvotes: 1

Views: 2985

Answers (2)

Ben Chan
Ben Chan

Reputation: 63

set 'clickable: false` in the circle option object to allow the click event be detected in the map layer. 

var circle = new google.maps.Circle({
    strokeColor: '#0000FF',
    strokeWeight: 2,
    fillOpacity: 0,
    map: map,
    center: new google.maps.LatLng(lat, lon),
    radius: 100,
    clickable: false
});

reference: Unclickable fill in Circle?

Upvotes: 1

duncan
duncan

Reputation: 31912

Try this: draw 2 circles, one for your outline (clickable) and one for your fill (not clickable). The fill circle should be slightly smaller, and set its z-index to sit on top of the other one, preventing you clicking on anything but the outline circle. The problem will be the other items you want to remain clickable underneath the circle.

Upvotes: 0

Related Questions