Lawrence Lawrence - 1 month ago 22
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%; }

<script src=" /js?key=AIzaSyBJkHXEVXBSLY7ExRcxoDxXzRYLJHg7qfI"></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);

//User Marker's Image
var image = '';

//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){



//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 {
{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,


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


<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"/>



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

function updateRadius(){
 var rad = document.getElementById("value_rad").value;

google.maps.event.addDomListener(window, 'load', initialize);
<script src=""></script>

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