38
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

ndm
  • 59,784
  • 9
  • 71
  • 110
ravneet
  • 471
  • 2
  • 5
  • 11
  • 3
    `.value` returns a string -> [`parseFloat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) – Andreas Jul 03 '17 at 05:43
  • The error solved but can u help to locate the location..actually the location is howing on the map but how to show the marker of that location? .thanks – ravneet Jul 03 '17 at 05:52
  • Post it as a separate question (which should include a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve/) (but don't post your API key ;)) – Andreas Jul 03 '17 at 05:55

5 Answers5

74

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'
    });
}
Andreas
  • 21,535
  • 7
  • 47
  • 56
7

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'
});}
anasmorahhib
  • 807
  • 9
  • 14
1

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));
Alex R
  • 11,364
  • 15
  • 100
  • 180
1

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.

Graham Reid
  • 51
  • 3
0

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
    });
}
סטנלי גרונן
  • 2,917
  • 23
  • 46
  • 68
betar
  • 1