Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maps Playground</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style media="screen">
#map {
height: 500px;
}
#location {
width: 200px;
}
.container {
margin-top: 50px;
}
.inputs {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-10">
<div class="form-inline inputs">
<div class="form-group">
<label for="location">Starting Location:</label>
<input type="text" id="location" value="UCF" class="form-control">
</div>
<div class="form-group">
<label for="searchTerm">Store:</label>
<input type="text" id="searchTerm" value="WAWA" class="form-control">
</div>
<div class="form-group">
<label for="miles">Radius in Miles:</label>
<input type="text" id="miles" value="5" class="form-control">
</div>
<button type="button" id="find" class="btn btn-success">Go!</button>
</div>
<div id="map"></div>
</div>
</div>
<script type="text/javascript">
var map,geocoder,service,markers,bounds,infoWindow;
document.getElementById("find").addEventListener("click", function(){
clearLocations();
var searchTerm = document.getElementById("searchTerm").value;
var address = document.getElementById("location").value;
var rad = document.getElementById("miles").value;
geoCodeAddress(address)
.then(function(results) {
return radarSearch(results[0].geometry.location,rad,searchTerm);
})
.then(function(results) {
return Promise.all(
results.map(findDetail)
);
})
.then(function(results) {
bounds = new google.maps.LatLngBounds();
results.forEach(createMarker);
map.fitBounds(bounds);
})
.catch(function(status) {
alert("error: "+ status);
});
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
geocoder = new google.maps.Geocoder();
service = new google.maps.places.PlacesService(map);
infoWindow = new google.maps.InfoWindow();
markers = [];
}
function geoCodeAddress(address) {
return new Promise(function(resolve,reject) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
resolve(results);
} else {
reject(status);
}
});
});
}
function radarSearch(location,rad,searchTerm) {
var request = {
location: location,
radius: rad*1609.34,
name: searchTerm
};
return new Promise(function(resolve,reject){
service.radarSearch(request, function(results,status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
resolve(results);
}else {
reject(status);
}
});
});
}
function findDetail(place) {
return new Promise(function(resolve,reject) {
service.getDetails({placeId: place.place_id}, function(place,status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
resolve(place);
} else {
reject(status);
}
});
});
}
function createMarker(element, index, array) {
var html = "<b>" + element.name + "</b> <br/>" + element.formatted_address;
var marker = new google.maps.Marker({
map: map,
position: element.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
bounds.extend(element.geometry.location);
markers.push(marker);
}
function clearLocations() {
markers.forEach(function(element, index, array) {
element.setMap(null);
});
markers = [];
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&libraries=places&callback=initMap"
async defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.