InvalidValueError: NaN is not an accepted value for latitude

Question

I got this error while running the following Javascript code:

<script>
        var map;
        var service;
        var infowindow;

        function initMap() {
            infowindow = new google.maps.InfoWindow();

            map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(33.4255, -111.9400), zoom: 15 });

            var geocoder = new google.maps.Geocoder();

            var latlng = geocodeAddress(geocoder);

            var lat = parseFloat(latlng.lat);
            var lng = parseFloat(latlng.lng);

            document.getElementById('<%= btnPredict.ClientID %>').addEventListener('click', function () {
                searchNearbyClinic(parseFloat(lat),parseFloat(lng));
            });
        }

        function geocodeAddress(geocoder) {
            var lat = '';
            var lng = '';

            var address = document.getElementById('<%= tbZIP.ClientID %>').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status === 'OK') {
                    lat = results[0].geometry.location.lat();
                    lng = results[0].geometry.location.lng();
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
            return { lat: lat, lng: lng };
        }

        function searchNearbyClinic(lat,lng) {
            var chosenLocation = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            var request = {
                location: chosenLocation,
                keyword: 'health clinic',
                radius: 5000
            };

            map = new google.maps.Map(document.getElementById('map'), { center: chosenLocation, zoom: 15 });

            var service = new google.maps.places.PlacesService(map);
            service.search(request, function (results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        createMarker(results[i]);
                    }

                    map.setCenter(results[0].geometry.location);
                }
            });
        }

        function createMarker(place) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }
</script>

A little background on what I'm doing: I have an ASP.NET page that has a textbox (tbZIP) and a button (btnPredict) in which after a zip code is entered into the textbox, the button would try to display a map that contains searched places on nearby area (defined by the ZIPCode) but somehow the latitude and longitude is not in a correct format here, although I have converted them into float (by using parseFloat) and the value in textbox is all numeric.

I'm very new to Javascript so I think I must have missed something very basic here. Any response would be much appreciated!

You don't need to keep calling `parseFloat()` when the variable is already a float. — Barmar, Apr 15 '20 at 02:10
`geocoder.geocode()` is an asynchronous function. You can't return the variables that it sets in the callback function, because the callback hasn't happened yet. — Barmar, Apr 15 '20 at 02:11
`return { lat: lat, lng: lng };` is returning the empty strings that you initialized the variables to. — Barmar, Apr 15 '20 at 02:12

InvalidValueError: NaN is not an accepted value for latitude

0 Answers0