JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTlBkIsBJqC5jME9-69xcaMvhXOMhRR5Y&amp;libraries=places"></script>
<div id="map"></div>
<input type="text" id='auto'>
<!-- 
nordkap {lat: 71.169493, lng: 25.783163999999942}
tromso {lat: 69.6492047, lng: 18.955323799999974}
bergen {lat: 60.39126279999999, lng: 5.32205440000007}
glasgow {lat: 55.864237, lng: -4.251805999999988}
belfast {lat: 54.59728500000001, lng: -5.930119999999988}
cork {lat: 51.8968917, lng: -8.486315699999977}
cardiff {lat: 51.4816403, lng: -3.178774100000055}
nantes {lat: 47.218371, lng: -1.553621000000021}
pamplona {lat: 42.812526, lng: -1.645774500000016}
salamanka {lat: 40.9701039, lng: -5.663539700000001}
sagres {lat: 37.01682929999999, lng: -8.940593100000001}
lisbon {lat: 38.7222524, lng: -9.139336599999979}

-->

CSS

html, body{
  margin:0;
  padding:0;
  height:100%;
}
#map{
  position:fixed;
  top:0;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:100%;
}
#auto{
  position:fixed;
  left:20px;
  top:20px;
  z-index:1000;
}

JavaScript

var mapOptions = {
    center:{
      lat: 52.5200066, lng: 13.404954
    },
    zoom: 15,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    streetViewControl: false,
    rotateControl: true
  };
var map = new google.maps.Map(document.getElementById('map'), mapOptions);


var auto = new google.maps.places.Autocomplete(document.getElementById('auto'));
auto.addListener('place_changed', function(){
	var place = auto.getPlace();
  if(place.geometry){
  	var latlng = {lat:place.geometry.location.lat(), lng:place.geometry.location.lng()};
    console.log(latlng);
  }
});