latitude, longitude null with google maps Geocoder

Question

latitude, longitude null with google maps Geocoder

Navigation

#1 by (2 votes)

1

I'm doing that when I enter the address I show the latitude and longitude but it comes out null or empty, I do not know if I'm missing something this thing:

function initMap(){
 var map = new google.maps.Map(document.getElementById('map'), {
   center: centerMap,
   scrollwheel: false,
   zoom: zoom
 });

 var geocoder = new google.maps.Geocoder();
 $('#recoger').keyup(busquedaGoogle(geocoder));
}

function busquedaGoogle (geocoder) {
  return function (event) {
    var direccion = $(this).val();
    console.log(direccion);
    geocoder.geocode({'address': direccion}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK){
            console.log(results[0].geometry.location);
        }
        else{
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
  }
}

result of the console:

javascript google-maps

asked by Albert Arias 23.03.2017 в 21:50

source

1 answer

Doubt entry operator "" res.json is not a function

score 2 · Accepted Answer

Your code is failing for another reason. I guess it's because of the error of google ads, which prevents another part of the code from being executed totally or partially.

I did a snippet with your code (adapted for the occasion) that does work.

However, , the problem you are trying to solve is already resolved. Google provides a widget to autocomplete addresses, and it reacts to the event place_changed so you know when a user chose an address.

In the way you have done it now, although it works, you're going to run into many errors for exceeding the requests quota, since you make one for each key.

I'll give you the example with your autocompleter and google.

var centerMap={lat:0,lng:-77  },
    zoom=7;
    
function initMap(){
 var map = new google.maps.Map(document.getElementById('map'), {
   center: centerMap,
   scrollwheel: false,
   zoom: zoom
 });

 var geocoder = new google.maps.Geocoder();
 $('#recoger').keyup(busquedaGoogle(geocoder));
 
  var autocomplete = new google.maps.places.Autocomplete($('#autocompletar')[0]);
  
  google.maps.event.addListener(autocomplete,'place_changed',function() {
      var place=autocomplete.getPlace();
      console.log(place.geometry);
  });
}

function busquedaGoogle (geocoder) {
  return function (event) {
    var direccion = $(this).val();
    console.log(direccion);
    geocoder.geocode({'address': direccion}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK){
            console.log(results[0].geometry.location);
        }
        else{
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
  }
}


jQuery(document).ready(function() {

  initMap();

});

#map {
width:100%;
height:90vh;
}
input {
width:40%;
margin:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&ext=.js"></script>

<input type="text" id="recoger" placeholder="input normal"/>
<input type="text" id="autocompletar" placeholder="autocomplete" />
<div id="map"></div>