addressform / googlemaps / javascript / latitude / longitude

Formulário de preenchimento automático de endereço junto com latitude e longitude

<html>
<head>
<meta name = “viewport” content = “initial-scale = 1.0, user-scalable = no”>
<meta charset = “utf-8”>
<script src = ” https: // mapas. googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places “> </script>

<link type =” text / css “rel =” stylesheet “href =” https: //fonts.googleapis. com / css? family = Roboto: 300,400,500 “>
</head>

<body>
<textarea placeholder = “Insira o nome da área para preencher Latitude e Longitude” name = “address” onFocus = “initializeAutocomplete ()” id = “locality”> </textarea> <br>

<input type="text" name="city" id="city" placeholder="City" value="" ><br>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" value="" ><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude" value="" ><br>
<input type="text" name="place_id" id="location_id" placeholder="Location Ids" value="" ><br>

<script type="text/javascript">
  function initializeAutocomplete(){
    var input = document.getElementById('locality');
    // var options = {
    //   types: ['(regions)'],
    //   componentRestrictions: {country: "IN"}
    // };
    var options = {}

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

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      var place = autocomplete.getPlace();
      var lat = place.geometry.location.lat();
      var lng = place.geometry.location.lng();
      var placeId = place.place_id;
      // to set city name, using the locality param
      var componentForm = {
        locality: 'short_name',
      };
      for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
          var val = place.address_components[i][componentForm[addressType]];
          document.getElementById("city").value = val;
        }
      }
      document.getElementById("latitude").value = lat;
      document.getElementById("longitude").value = lng;
      document.getElementById("location_id").value = placeId;
    });
  }
</script>

</body>
</html>

e também adicionar

[script src] https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places

[folha de estilo] https://fonts.googleapis.com/css?family=Roboto:300.400.500

API simples do google, js para ter uma barra de endereços de preenchimento automático e buscar latitude e longitude.

Related Posts