JamesBedont/maps-api-introduction.html

## maps-api-introduction.html
<!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>
	<!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>