error:InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

Question

function initAutocomplete() {
    var lat=document.getElementById(\'lat\').value;
    var lng=document.getElementById(\'lng\').value;
    console.log(lat);
    console.l         


        

Answer 1

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'
    });
}

Answer 2

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'
});}

Answer 3

Just initialize parameters:

function initMap(lat_ = 0, lon_ = 0) {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: lat_, lng: lon_},
        zoom: 10
    });
}

Answer 4

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));