I am currently working on integrating the Google Maps JS API into a website in order to display a map. However, I am facing an issue with drawing a circle centered around a specific point on the map. Despite following the example and documentation provided by Google for creating circles and polygons on maps, I seem to be encountering some difficulty which I cannot pinpoint. I have tried several different approaches to solve this problem without success.
While the map itself renders correctly, the circle that I am trying to draw does not appear on the map.
If anyone could provide me with guidance or advice on how to troubleshoot this issue, it would be greatly appreciated.
Below is the code snippet that I am currently using:
<div id="contractor__profile__map">
</div>
<script>
function initContractorMap() {
var centre = new google.maps.LatLng(57.276270031, -2.372935672);
var mapOptions = {
center: centre,
zoom: 9,
mapTypeId: 'terrain'
};
var newMap = new google.maps.Map(document.getElementById('contractor__profile__map'),
mapOptions);
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: centre,
radius: 840583700,
map: newMap
};
var circle = new google.maps.Circle(circleOptions);
circle.setMap(newMap);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}s&callback=initContractorMap"></script>