JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/maplace-js/0.2.10/maplace.min.js"></script>
<div id="gmap-circles" style="width: 600px; height: 400px"></div>
    
<select id="distance">
  <option value="100">100 Km</option>
  <option value="500">500 Km</option>
  <option value="1000">1000 Km</option>
  <option value="2000">2000 Km</option>
</select>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

$(function() {
  //Map config
  var LocsA = [
    {
      lat: 45.9,
      lon: 10.9,
      title: 'Title A1',
      html: '<h3>Content A1</h3>',
      icon: 'http://maps.google.com/mapfiles/markerA.png',
      animation: google.maps.Animation.DROP
    }
  ];

  var map = new Maplace({
    locations: LocsA,
    map_div: '#gmap-circles',
    start: 16,
    type: 'circle',
    shared: {
      zoom: 16,
      html: '%index'
    },
    circle_options: {
      radius: 10,  
    },
    circleRadiusChanged: function(index, point, marker) {
      $('#radiusInfo').text(
        ' - point #' + (index+1) + ' size: ' + parseInt(marker.getRadius()) + 'mt.'
      );
    }
  });
  map.Load();

  map.circles["0"].setRadius(100); //Changing the radius work here !

  //Select event
  $('select').on('change', function() {
    var value = this.value;
    map.circles["0"].setRadius(parseFloat(value)); //Changing the radius doesn't work anymore, here is my problem.
  });

});