function initAutocomplete() {
var lat=document.getElementById('lat').value;
var lng=document.getElementById('lng').value;
console.log(lat);
console.log(lng);
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat:lat, lng:lng},
zoom: 13,
mapTypeId: 'roadmap'
});}
it gives me the following error :
error:InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
The .value
attribute of a HTMLInputElement
returns the value as a string.
You have to parse the content of lat
and lng
with parseFloat()
before passing it to the maps API
function initAutocomplete() {
var lat = parseFloat(document.getElementById('lat').value);
var lng = parseFloat(document.getElementById('lng').value);
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: lat,
lng: lng
},
zoom: 13,
mapTypeId: 'roadmap'
});
}
Just add "+" before your variables:
function initAutocomplete() {
var lat=document.getElementById('lat').value;
var lng=document.getElementById('lng').value;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: +lat, lng: +lng},
zoom: 13,
mapTypeId: 'roadmap'
});}
Same error, slightly different scenario:
I kept getting this error (same as the OP) when trying to use the autocompleted lat/lng to update a map:
var place = autocomplete.getPlace();
var geo = place.geometry.location;
loadMapAt(new google.maps.LatLng(geo.lat, geo.lng));
This "one weird trick" fixed it. Replacing the second line with:
var geo = JSON.parse(JSON.stringify(place.geometry.location));
I also was getting this error when using autocomplete which the above suggestions didn't solve. In my case, I was able to correct this by passing lat
and lng
as properties to my Gmaps
element:
<Gmaps width={width}
height={height}
lat={lat}
lng={lng}
params = {{
v: '3.exp',
libraries: 'geometry, visualization, places',
key: GOOGLE_MAPS_API_KEY
}}
onMapCreated={this.onMapCreated}/>
This was using react-gmaps version 1.4.2.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With