how to get latitude and longitude of a circle's border to create that marker?

Question

this is my map factory

I draw a circle with multiple markers but I want to add a one marker at the end of circle(/outline of circle) for to change the radius dynamically. but I am unable to set the position (latitude and longitude) of that marker

sidemenu.factory('Map', function( $rootScope , $compile,$location,mapPlacesGeocoder,centerCoordinatesForMap,getMapObject){
  //  alert($location.path());

    var canvas   = document.getElementById('map'),
        defaults = { 
            center:    new google.maps.LatLng(0,0),
            zoom:      4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    return {
        init:function(properties , scope) {
            mapPlacesGeocoder.getCoOrdinates(scope.address,function (coOrdinates) {
                var map=getMapObject.mapEntity();
             centerCoordinatesForMap.setMapObject(map);    
            var center = new google.maps.LatLng(coOrdinates.lat, coOrdinates.lng);
           centerCoordinatesForMap.setMapcenter(center);
              var circle=getMapObject.circleEntity();
              centerCoordinatesForMap.setCircleObject(circle);
                  var bounds = getMapObject.boundsEntity();
             centerCoordinatesForMap.setBoundObject(bounds);  

                var infoWindow = new google.maps.InfoWindow({       
                    boxStyle: {  
                        width: "0%",
                        backgroundColor:'#ccc'
                         }});


                 var icon = {        
                           url: "../img/square.png", // url
                           scaledSize: new google.maps.Size(10, 10), // scaled size
                           origin: new google.maps.Point(0, 0), // origin
                          anchor: new google.maps.Point(0, 0) // anchor
                            };  

                var markerCenter = new google.maps.Marker({           
                     draggable: true,
                     title: 'Drag me!',
                      map: map, 
                      position:center
                     });



       var sizer = new google.maps.Marker({       
           draggable: true,
            title: 'Drag me!',
            position:circle.getBounds(),
            map: map
            }); 




               circle.bindTo('center', markerCenter, 'position');

        google.maps.event.addListener(markerCenter, 'dragend', function() {
        latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng());
        bounds = circle.getBounds(); 

        console.log(markerCenter.position.lat());
                console.log(markerCenter.position.lng()); 
        console.log(circle.getRadius());

             });

                for (var i = 0, length = properties.length; i < length; i++) {

                    var latLng = new google.maps.LatLng(properties[i].property_latitude, properties[i].property_longitude);

                    // Creating a marker and putting it on the map
                    scope.marker = new google.maps.Marker({ 
                        position:latLng,
                        map: map,
                      /*  icon:{
                             url:"/img/marker.jpg",
                            size: new google.maps.Size(80,80),
                            origin: new google.maps.Point(0, 0),
                            anchor: new google.maps.Point(24 / 2,24 / 2),
                            scaledSize: new google.maps.Size(40, 80)
                            }*/
                           });

                    bounds.extend(scope.marker.position);

                    google.maps.event.addListener(
                        scope.marker,
                        'mouseover',
                        (function( marker , scope, property,compile,location){
                            return function(){
                                var content = '<div id="google-popup">' +
                                    '<div class="infoWindowContent">' +property.hp_location.location_name +'</div>'+
                                    '<div class="infoWindowContent" ng-click="projectGallery()">' + property.hp_city.city_name +'</div>'+
                                    '<a  href=#'+location.path()+'?property_id='+property.propertyId+' class="active">' + property.property_name +'</a>' + '</div>';

                                var compiled = compile(content)(scope);
                                scope.$apply();
                                infoWindow.setContent(compiled[0].innerHTML);
                                infoWindow.open( Map , marker );
                             };
                        })(scope.marker,scope,properties[i],$compile,$location)
                     ); 


                     if(scope.city==true) {
                         circle.setMap(null);
                         map.fitBounds(bounds);
                        }
                      else if(scope.city==false) {
                         map.fitBounds(circle.getBounds());

                        }  

                    var listener = google.maps.event.addListener(map, "idle", function() {
                        google.maps.event.removeListener(listener);

                     });   


                    var listenerdragstart = google.maps.event.addListener(map, "zoom_changed", function() {

                        google.maps.event.clearListeners(map, 'idle');
                        google.maps.event.removeListener(listenerdragstart);
                    });


                    }

           })
        }//init
    };//return

});//

So how to create this marker?

 var sizer = new google.maps.Marker({       
      draggable: true,
      title: 'Drag me!',
      position:circle.getBounds(),
      map: map
 }); 

What I have to set this position of this marker to create at outline of this circle?

Answer 1

The position attribute of google.maps.Marker should be of type google.maps.LatLng not google.maps.LatLngBounds which circle.getBounds() returns.

However, you can get the coordinates of north-east and south-west corner of the bounds. What you could do in your case is to get the longitude of north-east corner, to get the right-most point of the circle and set it to the circle's center latitude. That way the resulting position will be on the border of the circle on right side.

So, you would do something like this:

position: new google.maps.LatLng(circle.getCenter().lat(), circle.getBounds().getNorthEast().lng()),