How to use Address instead of Lat/Long in Google Map API

Question

I want to use Google Map Markers to mark the places where we provide our services. MY Code using Lat/Long is working Fine but in my Project i need to use City Names instead

Answer 1

According to the spec (https://developers.google.com/maps/documentation/javascript/markers), you have to use a long/lat value to add a marker. However, you can use the Google Geocoding API (https://developers.google.com/maps/documentation/geocoding/intro) to translate an address into a long/lat value. So basically your flow becomes:

• geocode address x
• take the result and use that in the marker

Answer 2

You have to use the Geocoding API. An example to make an Address to Lat/lng:

 doGeocode: function (address, postal_code, callback) {
    console.log("TEST: "+address.toString());
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': address,
        'componentRestrictions': {
            'postalCode': postal_code,
            'country': 'de'
        }
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            callback(results);
        } else {
            //Error handling
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

Note: The address can also contain the houseNumber but enter a whitespace.

There is also a reverse Way to get Addresses from Lat/lng. Just in case some needs that:

reverseGeocoder: function (lat, lng, callback) {

    var geocoder = new google.maps.Geocoder;
    var addressComponents = {};
    geocoder.geocode({
        'location': {
            lat:lat,
            lng: lng
        }
    }, function (results, status){
        if(status === google.maps.GeocoderStatus.OK){
            if (results[1]) {
                var result = results[0].address_components;

                for (var i = 0; i < result.length; i++) {
                    if (result[i].types[0] == "route") {
                        console.log(result[i].long_name);
                        addressComponents.route = result[i].long_name
                    }
                    if (result[i].types[0] == "street_number") {
                        console.log(result[i].long_name);
                        addressComponents.street_number = result[i].long_name
                    }
                    if (result[i].types[0] == "locality") {
                        console.log(result[i].long_name);
                        addressComponents.locality = result[i].long_name
                    }
                    if (result[i].types[0] == "postal_code") {
                        console.log(result[i].long_name);
                        addressComponents.postal_code = result[i].long_name
                    }
                }
                callback(addressComponents);
            } else {
                alert('No information found.');
            }

        }else {
            alert("Die geolocation abfrage konnte leider nicht ausgeführt werden. "+status);
        }
    });

From the first function above you will get the Lat/lng. Then simply use a function like this:

var newMarkers = [];        //Global marker array
 marker: function (lat, lng) {
    console.log("new marker");

    //console.log("LAT: "+lat+ "LNG: "+lng);
    var marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        icon: icon,
        map: map
    });
    markers.push(marker);
    marker.addListener('click', function () {
        //InfoWindow or whatever u want
    });

    map.setCenter({lat: lat, lng: lng});
    map.setZoom(16);
},