JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7s0zDs4RMWrpqWjAmr7OD-BQbq8LubZk&sensor=false"></script>
<div id="mapa"></div>
CSS
#mapa {
width: 500px;
height: 400px;
}
JavaScript
var geocoder;
var map;
var marker;
function initialize() {
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapa"), options);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true,
});
marker.setPosition(latlng);
}
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){ // callback de sucesso
// ajusta a posição do marker para a localização do usuário
marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
},
function(error){ // callback de erro
alert('Erro ao obter localização!');
console.log('Erro ao obter localização.', error);
});
} else {
alert('Navegador não suporta Geolocalização!');
}
$(document).ready(function () {
initialize();
});