Databases
StackOverflow2013
Postsdbo
POHow to remove circle radius from google map
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to remove circle radius from google map
    text
    copied!<p>I am trying to change radius circle in google-map with drop-down list for example when i select 2 km from drop-down list it will be set to 2.0 radius and again if i select 4 km it will be set 4.0 to radius. At this point everything is working perfect but now problem is after selecting second time the first one is exists an not removed from circle.</p> <h2>My Code:</h2> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"&gt; &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt; &lt;style type='text/css'&gt; #map_canvas { background:#ccc; height:400px; width:50%; margin-top:15px; } &lt;/style&gt; &lt;select name="distance" id="distance"&gt; &lt;option value="0.5" selected="selected"&gt;0.5 km&lt;/option&gt; &lt;option value="1.0"&gt;1 km&lt;/option&gt; &lt;option value="2.0"&gt;2 km&lt;/option&gt; &lt;option value="3.0"&gt;3 km&lt;/option&gt; &lt;option value="4.0"&gt;4 km&lt;/option&gt; &lt;option value="5.0"&gt;5 km&lt;/option&gt; &lt;/select&gt; &lt;script type='text/javascript'&gt;//&lt;![CDATA[ jQuery.noConflict(); jQuery(document).ready(function() { var subjectRange; var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var locations = ['1.280095,103.850949']; /** * Draw points and check whether those points are inside a range from a point. */ var subjectPoint = { point: new google.maps.LatLng(1.280095,103.850949), radius: 1.0, //default radius color: '#00AA00', } var elevator; var map; var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(1.280095,103.850949); //render the range var subjectMarker = new google.maps.Marker({ position: subjectPoint.point, title: 'Subject', }); var subjectRange = new google.maps.Circle({ map: map, radius: subjectPoint.radius * 1000, // metres fillColor: subjectPoint.color, strokeColor: '#3D9912' }); subjectRange.bindTo('center', subjectMarker, 'position'); function codeAddress(locations) { for (i = 0; i &lt; locations.length; i++) { geocoder.geocode( { 'address': locations[i]}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } } codeAddress(locations); jQuery('#distance').on('change', function() { alert(jQuery('select[name="distance"] option:selected').val()); rad = jQuery('select[name="distance"] option:selected').val(); //subjectRange.setMap(null); var subjectPoint = { point: new google.maps.LatLng(1.280095,103.850949), radius: rad, color: '#00AA00', } //render the range var subjectMarker = new google.maps.Marker({ position: subjectPoint.point, title: 'Subject', }); var subjectRange = new google.maps.Circle({ map: map, radius: subjectPoint.radius * 1000, // metres fillColor: subjectPoint.color, strokeColor: '#3D9912' }); subjectRange.bindTo('center', subjectMarker, 'position'); }); });//]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;div id="map_canvas"&gt;Google Map&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload