Lawrence Lawrence - 18 days ago 9
Javascript Question

I can't change the size of the radius using input box and button for the user Google Map API

I have the following code and I want to set and change the circle's radius through user's input using input box and button. Any help will be appreciated.



<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width:100%;height:80%; }
.controls
</style>

<script src="https://maps.googleapis.com/maps/api /js?key=AIzaSyBJkHXEVXBSLY7ExRcxoDxXzRYLJHg7qfI"></script>


<script>


function initialize() {

//Setting default center of the system
var mapCenter = {
center: new google.maps.LatLng(36.2048, 138.2529),
zoom: 18

};
map = new google.maps.Map(document.getElementById("map-canvas"), mapCenter);
//Get User's Geolocation and Set as the Center of the System
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {

userLat = position.coords.latitude;
userLng = position.coords.longitude;

userLoc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(userLoc);


//User Marker's Image
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';


//Create Marker for the User's Location
var centerLoc = new google.maps.Marker({
position : new google.maps.LatLng(userLat, userLng),
map : map,
icon: image,
title : 'Your Position!',
draggable : true,
animation: google.maps.Animation.DROP
});


//Create Circle and Bind it to User's Location
var circle = new google.maps.Circle({
map: map,
radius: Send, // 10 miles in metres
fillColor: '#AA0000'
});

circle.bindTo('center', centerLoc, 'position');
});
}
function updateRadius(circle, rad){
circle.setRadius(rad);
}


loadHotels();


}


//Load Records from Cloud
function loadHotels() {Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.GeoLocatorController.findAll}',

function(result, event){

if (event.status) {
for (var i=0; i<result.length; i++) {
var id = result[i].Id;
var name = result[i].Name;
var lat = result[i].Location__Latitude__s;
var lng = result[i].Location__Longitude__s;
addMarker(id, name, lat, lng);
}
} else {
alert(event.message);
}
},
{escape: true}
);
}



//Create Markers for the Records from the Cloud
function addMarker(id, name, lat, lng) {

var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: name,
});
marker.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);
console.log()

</script>
</head>
<body>

<div id="map-canvas"/>
//This is the code for input box and button to be used for user's input value for circle radius

<div id="panel">

<input id="radius" class="controls" type="text a
"
placeholder="Enter Search Area Radius (km)"/>

<input id="Send" type="button" value="Search" onclick="radius"/>

</div>
</body>

Answer

See this code (it's work), and adapt your code

var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var circle;

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({
        position: myCenter,
    });
    
    circle = new google.maps.Circle({
        map: map,
        radius: 100,    // 10 miles in metres
        fillColor: '#AA0000',
        center: myCenter
     });               
    
    marker.setMap(map);
}

function updateRadius(){
 var rad = document.getElementById("value_rad").value;
 circle.setRadius(parseFloat(rad));
}

google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJkHXEVXBSLY7ExRcxoDxXzRYLJHg7qfI"></script>


<div id="googleMap" style="width:500px;height:380px;"></div>
<input id=value_rad />
<input id="radius" type="button" value="test" onclick="updateRadius()"/>