Geolocation and Google maps to get country, state and city from position marker

i’m working on an example of google maps that allows to user to put a marker on the map and get longitute and latitute, now i’m trying to add from this lng and lat getting state, country, city street and zipcode,
at first i was using google maps API, and now i found examples that are using geocode API to get more informations..

this function is to add marker in the map

handleMapClick(event) {
    this.selectedPosition = event.latLng;
    this.overlays=[];
    this.overlays.push(new google.maps.Marker({
          position:{
            lat: this.selectedPosition.lat(),
            lng: this.selectedPosition.lng()
          },
          title:this.markerTitle,
          draggable: true
    }));
    this.monitor.lng = this.selectedPosition.lng();
    this.monitor.lat = this.selectedPosition.lat()

}

// i add this function to get full address

 function () {
let latlng = new google.maps.LatLng(this.monitor.lat, this.monitor.lng);
new google.maps.Geocoder().geocode({'latLng' : latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
            var country = null, countryCode = null, city = null, cityAlt = null;
            var c, lc, component;
            for (var r = 0, rl = results.length; r < rl; r += 1) {
                var result = results[r];

                if (!city && result.types[0] === 'locality') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'locality') {
                            city = component.long_name;
                            break;
                        }
                    }
                }
                else if (!city && !cityAlt && result.types[0] === 'administrative_area_level_1') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'administrative_area_level_1') {
                            cityAlt = component.long_name;
                            break;
                        }
                    }
                } else if (!country && result.types[0] === 'country') {
                    country = result.address_components[0].long_name;
                    countryCode = result.address_components[0].short_name;
                }

                if (city && country) {
                    break;
                }
            }

            console.log("City: " + city + ", City2: " + cityAlt + ", Country: " + country + ", Country Code: " + countryCode);
        }
    }
});

// and i have this one in my index.hmtl file to use the google maps API

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWmDq-91gTstHBb06A4uqEMEXjGqM1lYI&libraries=places"></script>

but i always have the error :
"Geocoding Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services please see"

anyone please have any idea if i should change the API, or if there is an other way from google maps to get full address
because there was an API called Google Maps Geocoding API i guess that it combine both of geocoding API and google maps API but i think it’s not available anymore. and thanks

14 thoughts on “Geolocation and Google maps to get country, state and city from position marker”

Leave a Comment