nashCode nashCode - 1 month ago 76
jQuery Question

latlng.lat show NaN in google maps

I am implementing the Google Maps API, i need to do is that when I click on the map should capture the coordinates, longitude and latitude in separate fields of text, ie an input display length and another input latitude of moment could capture the coordinates and clicking but when I check with console.log (latlng.lat); NAN shows the value while console.log (latlng.lng); works well for showing me coordinate properly.

when i add in file .js this line: var geocoder = new google.maps.Geocoder();

show this error: Uncaught Eb {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Eb (https://maps.googleapis.com/m…MY_API_KEY&callback=initMap:131:73"}

please help me.

HTML:

<div id="map-wrapper">
<div id="floating-panel">

<label>latitud y longitus juntas:</label>
<input id="latlng" type="text" value="40.714224,-73.961452">

<label>latitud</label>
<input id="latitud" type="text" value="">

<label>Longitud</label>
<input id="longitud" type="text" value="">

<input id="submit" type="button" value="Geocode">
</div>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>


JS:

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 20,
center: {lat: -34.397, lng: 150.644}
});
var geocoder = new google.maps.Geocoder();

document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});

map.addListener('click', function(e) {
placeMarkerAndPanTo(e.latLng, map);
});

var infowindow = new google.maps.InfoWindow;
}

function placeMarkerAndPanTo(latLng, map, infowindow) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
map.panTo(latLng);

console.log('la latitud y longitud inicial son: '+ latLng);
jQuery('#latlng').val(latLng);
var input = document.getElementById('latlng').value;
console.log('la latitud y longitud nuevas son: '+ input);
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
console.log('la longitud real es: '+ latlng.lng);
console.log('la latitud real es: '+ latlng.lat);
}

Answer

input.split(',', 2); returns:

0:"(37.4419"
1:" -122.14190000000002)"

The 0th entry is not a number.

input = input.substring(1,input.indexOf(')'));
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
console.log('longitude: '+ latlng.lng);
console.log('latitude: '+ latlng.lat); 

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infowindow = new google.maps.InfoWindow();
  placeMarkerAndPanTo(map.getCenter(), map, infowindow);

}
google.maps.event.addDomListener(window, "load", initialize);

function placeMarkerAndPanTo(latLng, map, infowindow) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  map.panTo(latLng);

  jQuery('#latlng').val(latLng);
  var input = document.getElementById('latlng').value;

  input = input.substring(1, input.indexOf(')'));
  console.log(input);
  var latlngStr = input.split(',', 2);
  var latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1])
  };
  console.log('longitude: ' + latlng.lng); //this work fine
  console.log('latitude: ' + latlng.lat); // this show NAN       
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<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"></script>
<input id="latlng" />
<div id="map_canvas"></div>

Comments