Hello,

I have a Gmap location chooser enabled on my user register form and I would like to figure out a way to add a circle overlay centered on the map marker showing a 10KM radius.

I found an article on stackoverflow outlining how to do it with the Google Maps API V3 : http://stackoverflow.com/questions/825794/draw-radius-around-a-point-in-...

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});


// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

I'm hoping there's a way to add something like this to my Gmap somehow. Has anyone out there tried something like this yet?

Any help would be greatly appreciated.

Cheers

Comments

countrdd’s picture

countrdd commented

Did you get this working?

maul’s picture

maul commented
Issue summary: View changes

try this

<script>
currentCircle = null;
(function ($) {
    Drupal.behaviors.gmap = {
        attach: function (context, settings) {
          //reference for the map
          var map = Drupal.gmap.getMap('auto1map');
          //bind addmarker-handler, the marker is available as callback-argument  
          map.bind('addmarker', function (m) {
            //add  your custom listener
            google.maps.event.addListener(m.marker, 'click',function(){
              if (currentCircle != null) {
                currentCircle.setMap(null);
              }
              var circleMap = Drupal.gmap.getMap('auto1map').map;
              currentCircle = new google.maps.Circle({
                      center: new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng()),
                      radius: 2000,
                      strokeColor: "#FF0000",
                      strokeOpacity: 0.8,
                      strokeWeight: 2,
                      fillColor: "#FF0000",
                      fillOpacity: 0.35,
                      map: circleMap
              });
            });
          });
        }
    }
})(jQuery);
</script>