JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<input id="pac-input" />
<div id="map"></div>
CSS
html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
//center: {lat: 28.53687, lng: -81.38328},
center: {lat: 28.5893244, lng: -81.3744571},
zoom: 0,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//Add marker and popup info
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h4 id="firstHeading" class="firstHeading">MAINEly Knowles Lobster</h4>'+
'<div id="bodyContent">'+
'<p><center>887 Jackson Ave<br> Winter Park, FL 32789<br> Phone: <a href="tel:407-960-7441">407-960-7441</a><br> <a href="/contact/">Contact Us!</a></center></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: {lat: 28.5893244, lng: -81.3744571},
map: map,
title: 'MAINEly Knowles Lobster'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
// Polygon
var ctaLayer = new google.maps.KmlLayer({
url: 'http://mainelyknowleslobster.com/map/circle.kml',
preserveViewport: true,
map: map
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places =...