Google places API

by kenwals

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="SZrpbsLn0iqzGwTjpKTTK_zH0vp2RHnP8aZ2NE5OjOQ" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/css/bootstrap.min.css">
    <title>Title</title>
  </head>

  <body>


 <input type="text"  id="location" name="location" placeholder="Please enter the location you found the wildlife animal" required>


<script>
let autocomplete;

function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
    document.getElementsById("location"), {
      types: ["establishment"],
      componentRestrictions: {
        "country": ["AU"]
      },
      fields: ["place_id", "geometry", "name"]
    });
  autocomplete.addListener("place_changed", onPlaceChanged);
  console.log("gm initiated");
}

function onPlaceChanged() {
  var place = autocomplete.getPlace();

  if (!place.geometry) {
    // User did not select a prediction; reset the input field
    document.getElementById("location").placeholder = "Enter a Place";
  } else {
    // Display details about the valid place
    document.getElementById("details").innerHTML = place.name;
  }
}



</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBE9p_HgjASrdVg5WwHtTUzxgODTOe41mo&libraries=places&callback=initAutocomplete" async defer>   console.log("gm1 initiated");
    </script>

  </body>

</html>