Plot location on Google map using full address specified in custom field

Question

Is there an easy way to plot a location on a Google map using an address specified in a custom field?

For example, if a post has the following address specified;

1600 Pennsylvania Avenue, NW Washington, DC 20500

A Google map will automatically be displayed on the page with with a marker on this exact location?

Surely it can't be that difficult.

I've looked at the API but nothing sprung out at me

Answer 1

Dean, your best bet is to do it through JS on the front end.

I use the following function to covert the postcode to a Lat and Lng:

function codeAddress(address){
    geocoder.geocode({
        'address': address
    }, function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
            map.setCenter(results[0].geometry.location);
            map.setZoom(16);

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            markersArray.push(marker);      

            // BA Lng, za Lat 

            //console.log(results[0].geometry.location['Ba']);

            document.getElementById("_supplier_maplatlong").value = results[0].geometry.location;

        }else{
            alert("Postcode not found");
        }
    });
}

Then just drop in the postcode in to a hidden input or something and do something along the lines of:

if($('#_supplier_postcode').val()){
        codeAddress($('#_supplier_postcode').val());
    }

Once you've initialize() obviously.