JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<input type="text" id="autocomplete" />
<!-- Google Maps API integration-->
<div class="gmaps">
  <div id="map"></div>
</div>

CSS

html,
body,
#map,
.gmaps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var infoWindow;
var map;
function initMap() {
  <!-- getting the user location -->
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, errorFunc);
  } else {
    alert('geolocation not supported');
  }

  function errorFunc(posErr) {
    console.log("Position Error code:" + posErr.code + " msg:" + posErr.message);
  }
  <!-- if successfully found the location -->
  function success(position) {
    infoWindow = new google.maps.InfoWindow();
    var uluru = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });

    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
  var acOptions = {
    types: ['establishment']
  };
  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), acOptions);
  google.maps.event.addListener(map,'bounds_changed', function() {
    autocomplete.bindTo(map, 'bounds');
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infoWindow.close();
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }
    marker.setPosition(place.geometry.location);
    infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
    infoWindow.open(map, marker);
    google.maps.event.addListener(marker, 'click', function(e) {

      infoWindow.open(map, marker);

    });
  });
}
google.maps.event.addDomListener(window, "load", initMap);