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 = "1";
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);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/infobox-module.min.js"></script>
<div id="map"></div>