JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
<form id="zipcodeSearch">
<input type="text" id="zipcode" placeholder="Enter zipcode here" />
<input type="submit" value="Search" />
</form>
<div id="map-canvas"></div>
CSS
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
/* so, 10px = 1rem */
}
body {
font-family: arial;
}
#map-canvas {
z-index: -1;
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
JavaScript
var predefinedLocations = [{
"name": "Brookwood Medical Center",
"lat": 33.4636415,
"lng": -86.7771671
},
{
"name": "Lutheran Medical Center",
"lat": 40.646872,
"lng": -74.020892
}
];
$("form#zipcodeSearch").on("submit", function(event) {
event.preventDefault();
var jsonUrl = 'http://maps.googleapis.com/maps/api/geocode/json?place=' + $("input#zipcode").val();
$.ajax({
type: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'text/plain'
},
dataType: "json",
url: jsonUrl,
success: function(data) {
var lat = (data.results[0].geometry.bounds.northeast.lat + data.results[0].geometry.bounds.southwest.lat) / 2;
var lng = (data.results[0].geometry.bounds.northeast.lng + data.results[0].geometry.bounds.southwest.lng) / 2;
var p1, p2;
predefinedLocations.forEach(function(obj) {
p1 = new google.maps.LatLng(obj.lat, obj.lng);
p2 = new google.maps.LatLng(lat, lng);
obj.distance = calcDistance(p1, p2);
});
// sort by distance
var locationInfo = predefinedLocations.sort(compare);
//console.log('locationInfo', locationInfo);
initializeGoogleMap(locationInfo, lat, lng);
}
});
});
var map;
function initializeGoogleMap(locationInfo, lat, lng) {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// zoom to only the input zipcode and closest location
var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(new google.maps.LatLng(locationInfo[0].lat, locationInfo[0].lng));
latlngbounds.extend(new google.maps.LatLng(lat, lng));
map.fitBounds(latlngbounds);
var infowindow = new google.maps.InfoWindow();
var marker, i;
// set marker for input location
setMarker(lat, lng, map, 'http://www.lsac.org/images/default-source/mainportalimages/icon-h-grey-bg.jpg?sfvrsn=2', "You are here!", i, infowindow);
...