ceautery/test.html

## test.html
<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
    var geocoder, map;

    var addresses = ["San Francisco", "Austin Texas", "Salt Lake City", "Lincoln, NE", "Grand Rapids, Michigan", "Holland, Michigan", "Detroit", "Chicago", "Seattle", "Ann Arbor", "Cupertino, CA", "Lakewood, CO", "Lansing, MI", "Philadelphia, PA", "Cincinnati, Ohio", "Farmington Hills, MI", "New Albany, Ohio", "East Stroudsburg, PA", "Rochester, Minnesota", "South Bend, IN", "Clearwater, Florida", "Jersey City, NJ", "Brooklyn, NY", "Needham, MA", "Dublin, Ireland", "New York City", "Tolland, CT", "Brattleboro, VT", "Kalamazoo, MI", "Madison, WI", "Berkeley, CA", "Ephrata, PA", "Zeeland, MI", "Cleveland, OH", "Dallas, TX"];

    var locations = [];

      function initMap() {
        geocoder = new google.maps.Geocoder();

        var uluru = {lat: 37.09024, lng: -95.712891};
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });

        // locations.forEach(l => {
        //   new google.maps.Marker({
        //         map: map,
        //         position: l.coords
        //     });

        // })

        var interval = setInterval(function() {
          if (addresses.length) {
            codeAddress(addresses.shift());
          } else {
            clearInterval(interval);
          }
        }, 1000)
      }

      function codeAddress(address) {
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == 'OK') {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            locations.push({ city: address, coords: results[0].geometry.location});
          } else {
            console.log(status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap">
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#map {
	height: 400px;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<h3>My Google Maps Demo</h3>
	<div id="map"></div>
	<script>
	var geocoder, map;

	var addresses = ["San Francisco", "Austin Texas", "Salt Lake City", "Lincoln, NE", "Grand Rapids, Michigan", "Holland, Michigan", "Detroit", "Chicago", "Seattle", "Ann Arbor", "Cupertino, CA", "Lakewood, CO", "Lansing, MI", "Philadelphia, PA", "Cincinnati, Ohio", "Farmington Hills, MI", "New Albany, Ohio", "East Stroudsburg, PA", "Rochester, Minnesota", "South Bend, IN", "Clearwater, Florida", "Jersey City, NJ", "Brooklyn, NY", "Needham, MA", "Dublin, Ireland", "New York City", "Tolland, CT", "Brattleboro, VT", "Kalamazoo, MI", "Madison, WI", "Berkeley, CA", "Ephrata, PA", "Zeeland, MI", "Cleveland, OH", "Dallas, TX"];

	var locations = [];

	function initMap() {
	geocoder = new google.maps.Geocoder();

	var uluru = {lat: 37.09024, lng: -95.712891};
	map = new google.maps.Map(document.getElementById('map'), {
	zoom: 4,
	center: uluru
	});

	// locations.forEach(l => {
	// new google.maps.Marker({
	// map: map,
	// position: l.coords
	// });

	// })

	var interval = setInterval(function() {
	if (addresses.length) {
	codeAddress(addresses.shift());
	} else {
	clearInterval(interval);
	}
	}, 1000)
	}

	function codeAddress(address) {
	geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == 'OK') {
	map.setCenter(results[0].geometry.location);
	var marker = new google.maps.Marker({
	map: map,
	position: results[0].geometry.location
	});
	locations.push({ city: address, coords: results[0].geometry.location});
	} else {
	console.log(status);
	}
	});
	}
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap">
	</script>
	</body>
	</html>