Google Geolocation test

by Ricardo Zambon

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <input type="text" id="search" style="width:100%" />
    
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

JavaScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places">
function initService() {
  
	const center = { lat: 50.064192, lng: -130.605469 };
	
	// Create a bounding box with sides ~10km away from the center point
	const defaultBounds = {
		north: center.lat + 0.1,
		south: center.lat - 0.1,
		east: center.lng + 0.1,
		west: center.lng - 0.1,
	};
	
  const options = {
    bounds: defaultBounds,
    componentRestrictions: { country: "br" },
    fields: ["adr_address"],
    strictBounds: false,
    types: ["address"],
  };
  
  const autocomplete = new google.maps.places.Autocomplete(document.getElementById("search"), options);
}