JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
JavaScript
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(20.291, 153.027),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
strokeWeight: 2,
scale: 3
};
var outerEdge={
path: 'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
fillColor: 'red',
fillOpacity: 0.8,
scale: 5,
strokeColor: 'red',
strokeWeight: 14
};
var myIcon={
1:{
},
2:{
}
}
var goldStar = {
path: 'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
fillOpacity: 0.8,
scale: 1,
strokeColor: 'gold',
strokeWeight: 0
};
var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027),
new google.maps.LatLng(15.291, 153.027),
new google.maps.LatLng(11.291, 153.027)];
// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var edge = new google.maps.Circle({
center:{lat:18.514435,lng:73.926172},
map:map,
fillColor:'green',
radius:900,
strokeColor:'white',
strokeWeight:10
});
var mark = new google.maps.Circle({
center:{lat:18.514435,lng:73.926172},
map:map,
radius:1000,
strokeColor:'black',
strokeWeight:10
});
}
google.maps.event.addDomListener(window, 'load', initialize);