joshwentz/places.html

## places.html
<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      .map, #map-canvas {
        height: 200px;
        width:100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(39.893258599099475, -75.17451879743021),
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: false,
    panControl: false,
    streetViewControl: false,
    zoomControl: true,
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));

  var types = document.getElementById('type-selector');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.Icon} */({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    google.maps.event.addDomListener(radioButton, 'click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <div class="map">
    <input id="pac-input" class="controls" type="text" placeholder="Street, City, State, Zip">
    <div id="map-canvas"></div>
  </div>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Place Autocomplete</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	.map, #map-canvas {
	height: 200px;
	width:100%;
	margin: 0px;
	padding: 0px
	}
	.controls {
	margin-top: 16px;
	border: 1px solid transparent;
	border-radius: 2px 0 0 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 32px;
	outline: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}

	#pac-input {
	background-color: #fff;
	padding: 0 11px 0 13px;
	width: 400px;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: ellipsis;
	}

	#pac-input:focus {
	border-color: #4d90fe;
	margin-left: -1px;
	padding-left: 14px; /* Regular padding-left + 1. */
	width: 401px;
	}

	.pac-container {
	font-family: Roboto;
	}

	#type-selector {
	color: #fff;
	background-color: #4d90fe;
	padding: 5px 11px 0px 11px;
	}

	#type-selector label {
	font-family: Roboto;
	font-size: 13px;
	font-weight: 300;
	}
	}

	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

	<script>
	function initialize() {
	var mapOptions = {
	center: new google.maps.LatLng(39.893258599099475, -75.17451879743021),
	zoom: 17,
	mapTypeId: google.maps.MapTypeId.HYBRID,
	mapTypeControl: false,
	panControl: false,
	streetViewControl: false,
	zoomControl: true,
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	var input = /** @type {HTMLInputElement} */(
	document.getElementById('pac-input'));

	var types = document.getElementById('type-selector');
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

	var autocomplete = new google.maps.places.Autocomplete(input);
	autocomplete.bindTo('bounds', map);

	var infowindow = new google.maps.InfoWindow();
	var marker = new google.maps.Marker({
	map: map
	});

	google.maps.event.addListener(autocomplete, 'place_changed', function() {
	infowindow.close();
	marker.setVisible(false);
	var place = autocomplete.getPlace();
	if (!place.geometry) {
	return;
	}

	// If the place has a geometry, then present it on a map.
	if (place.geometry.viewport) {
	map.fitBounds(place.geometry.viewport);
	} else {
	map.setCenter(place.geometry.location);
	map.setZoom(17); // Why 17? Because it looks good.
	}
	marker.setIcon(/** @type {google.maps.Icon} */({
	url: place.icon,
	size: new google.maps.Size(71, 71),
	origin: new google.maps.Point(0, 0),
	anchor: new google.maps.Point(17, 34),
	scaledSize: new google.maps.Size(35, 35)
	}));
	marker.setPosition(place.geometry.location);
	marker.setVisible(true);

	var address = '';
	if (place.address_components) {
	address = [
	(place.address_components[0] && place.address_components[0].short_name \|\| ''),
	(place.address_components[1] && place.address_components[1].short_name \|\| ''),
	(place.address_components[2] && place.address_components[2].short_name \|\| '')
	].join(' ');
	}

	infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
	infowindow.open(map, marker);
	});

	// Sets a listener on a radio button to change the filter type on Places
	// Autocomplete.
	function setupClickListener(id, types) {
	var radioButton = document.getElementById(id);
	google.maps.event.addDomListener(radioButton, 'click', function() {
	autocomplete.setTypes(types);
	});
	}

	setupClickListener('changetype-all', []);
	setupClickListener('changetype-establishment', ['establishment']);
	setupClickListener('changetype-geocode', ['geocode']);
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<div class="map">
	<input id="pac-input" class="controls" type="text" placeholder="Street, City, State, Zip">
	<div id="map-canvas"></div>
	</div>
	</html>