JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="newtool">
<p>
Selecionar a ferramenta Poligono e desenhar o Triangulo das Bermudas sem usar o mouse. Adicione as coordenadas e clique em Add.(Não funciona, é só um exemplo do que preciso)<br>
{lat: 25.774, lng: -80.190}<br>
{lat: 18.466, lng: -66.118}<br>
{lat: 32.321, lng: -64.757}
</p>
Lat <input id="lat" type="text" />
Lng <input id="lng" type="text" />
<button id="add" onclick="triggerClick()">Add</button>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=drawing&callback=initMap" async defer></script>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.newtool {
background: #ffffff;
}
.newtool input {
width: 50px;
}
JavaScript
function triggerClick() {
var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
var mev = {
stop: null,
latLng: new google.maps.LatLng( lat, lng )
}
google.maps.event.trigger( map, 'click', mev );
}
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 24.886, lng: -70.268},
zoom: 5
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {icon: 'images/beachflag.png'},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}