All geek questions in one place

Add option (get location) to Google autocomplete

I currently have a stylized pac input on my page for use with Google autocomplete from the place library. I tried to add an option to get the location at the top of the drop down list, but no luck.

enter image description here

Javascript (I'm not js wiz) -

  var lat = 'empty';
    var lng = 'empty';
    var placeSearch, autocomplete;
    var place;
    var geocoder;


    function initialize() {

  geocoder = new google.maps.Geocoder();
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('pac-input')),
      { types: ['geocode', 'establishment'], 
        componentRestrictions: {country: 'GB'}});
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
  place = autocomplete.getPlace();
      lat = place.geometry.location.lat();
      lng = place.geometry.location.lng();
      document.getElementById('please').style.display = "none";
      document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  });

}


function getlocation() {
 if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    $('#wait').show();
    $('#getlocation').hide();

    }
  else{document.getElementById('lat').innerHTML="Geolocation is not supported by this browser.";}
  }


function showPosition(position)
  {
  lat = position.coords.latitude;
  lng = position.coords.longitude;
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        document.getElementById('pac-input').value = (results[0].formatted_address.split(",")[0]);
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
  $('#wait').hide();
  $('#getlocation').show();
   document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
      document.getElementById('please').style.display = "none";
  }

function blurred() {
/////////bug if type and select location, click out, retype and click out. can i store the name as variable and check value against that?
  var beginning = document.getElementById('pac-input').value.split(",")[0];
  place = autocomplete.getPlace();
  if (! place) {
    lat = 'empty';
    lng = 'empty';
    document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  } else {  if (! place.geometry) {
    lat = 'empty';
    lng = 'empty';
    document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  }else{ if (beginning != place.name) {
    lat = 'empty';
    lng = 'empty';
    document.getElementById('lat').innerHTML="Latitude: " + lat + 
  "<br>Longitude: " + lng;  
  }}}

if (lat == 'empty') {
  document.getElementById('please').style.display = "inline-block";
}}


function focused() {
  document.getElementById('pac-input').value = "";
  if (lat != 'empty'){
  lat = 'empty';
  lng = 'empty';
}}

HTML -

 <body onload="initialize()">
    <div id="center">
    <div id="areacontainer">
      <input id="pac-input" placeholder="Area..." value=""
             onFocus="focused()" onblur="blurred()" type="text" onchange="go()">
      </input>
      <div id="getlocation" onclick="getlocation()"></div><div id="wait"></div>
    </div>
      <div id="lat"></div>
      <div id="please">Please enter a valid location.</div>
  </div>
  </body>

Thanks for any help.

+4
source share
1 answer

I understand that the question is the year, and the OP certainly handled it, so this is for everyone who is interested.

select keyup, , , , . IE DOM , .

AutocompleteService . , Autocomplete, , , , .

+2

Source: https://habr.com/ru/post/1532638/

More articles:


All Articles