JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>

CSS

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

JavaScript

function initialize() {

  var frrlanser_marker = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    radius: 60 * 100
  };

  var latlng = new google.maps.LatLng(6.951974, 80.720160);
  var myOptions = {
    scrollwheel: false,
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
  var fill_color_val = '#3888ff';

  var latitude = 6.951974;
  var lontitude = 80.720160;

  var myLatLng = google.maps.LatLng(latitude, lontitude);

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });

  // Add circle overlay and bind to marker
  var circle = new google.maps.Circle({
    map: map,
    radius: 3200, // 10 miles in metres
    fillColor: fill_color_val,
    strokeColor: '#FFFFFF',
    strokeWeight: 2,
    fillOpacity: 1,
  });
  circle.bindTo('center', marker, 'position');

  marker.setVisible(false);

  var labelText = "385649";
  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "10pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, -5),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);

}

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