guiocavalcanti/map.html

## map.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>
      html, body, #map-canvas {
        height: 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&libraries=places"></script>

    <script>
      function initialize() {
        var input = /** @type {HTMLInputElement} */(
          document.getElementById('pac-input'));

          var autocomplete = new google.maps.places.Autocomplete(input);

          var infowindow = new google.maps.InfoWindow();

          google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            var place = autocomplete.getPlace();
            if (!place.geometry) {
              return;
            }
            console.log(place.geometry.location.toString());
          });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
  </body>
</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>
	html, body, #map-canvas {
	height: 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&libraries=places"></script>

	<script>
	function initialize() {
	var input = /** @type {HTMLInputElement} */(
	document.getElementById('pac-input'));

	var autocomplete = new google.maps.places.Autocomplete(input);

	var infowindow = new google.maps.InfoWindow();

	google.maps.event.addListener(autocomplete, 'place_changed', function() {
	infowindow.close();
	var place = autocomplete.getPlace();
	if (!place.geometry) {
	return;
	}
	console.log(place.geometry.location.toString());
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
	</body>
	</html>