Skip to content

Instantly share code, notes, and snippets.

@wkw
Last active May 26, 2020 00:54
Show Gist options
  • Select an option

  • Save wkw/83ce9c8ee97a9c2e58b9 to your computer and use it in GitHub Desktop.

Select an option

Save wkw/83ce9c8ee97a9c2e58b9 to your computer and use it in GitHub Desktop.
Geolocate Address with Google Maps API. Have used this code in WordPress admin on a few projects. Not overly generalized or documented in this version.
/*
*
* Adds Geolocate button for Locations CPT custom address field
* On button click, gathers address field components and looks up the geolocation with google
* maps api.
*
* DEPENDENCIES:
* must load //maps.googleapis.com/maps/api/js?sensor=false&key=<YOUR-API-KEY>
*/
/* jshint ignore:start */
;(function($,window,undefined){
var $fld; // geolocation coordinates field as jquery object
var err_msgs = {
bad_addrs: "Not enough address info entered to lookup geo-coordinates",
lookup_failed: "Geocoding lookup failed. Please verify address values",
over_limit: "Google Maps Error: OVER LIMIT"
};
function getAddress(){
var addr = $('input[name="cfs[input][17][value]"]').val()
,city = $('input[name="UNDEFINED"]').val()
,state = $('input[name="UNDEFINED"]').val()
,zip = $('input[name="UNDEFINED"]').val()
,city_st_zip = $('input[name = "cfs[input][19][value]"]').val();
if( city_st_zip === '' ){
if( city == '' && state == '' && zip == '' ){
return false;
}else{
city_st_zip = addr + city + ', ' + state + ' ' + zip;
}
}
var address = addr + ', ' + city_st_zip;
console.log(address);
return address;
}
// return geocode input field jquery obj
function $geoinput(){
return $('input[name="cfs[input][32][value]"]');
}
function clear_geo_field(){
$geoinput().val('');
}
// ready
$(function(){
var address;
var btn_html = '<button id="geobtn" style="height:25px;padding:3px;font-size:14px;">Geolocate Address</button';
$fld = $geoinput();
//resize input field
$fld.width(300);
//add button
$fld.parent().append(btn_html);
$("#geobtn").on('click',function(evt){
evt.preventDefault();
address = getAddress();
if( !address ){
alert(err_msgs.bad_addrs);
return false;
}
var geocoderRequest = {address:address, region:'us'};
var geocoder = new google.maps.Geocoder();
// callback func for geocoder
var geoCallback = function(geocoderResultArray, status){
var r = geocoderResultArray;
//console.log(gra=geocoderResultArray, "status=" + status);
switch(status){
case google.maps.GeocoderStatus.ZERO_RESULTS:
case google.maps.GeocoderStatus.INVALID_REQUEST:
alert(err_msgs.lookup_failed + " (zero results)");
break;
case google.maps.GeocoderStatus.ERROR:
alert("Google maps Error");
break;
case google.maps.GeocoderStatus.OVER_QUERY_LIMIT:
alert(err_msgs.over_limit);
break;
case google.maps.GeocoderStatus.REQUEST_DENIED:
case google.maps.GeocoderStatus.UNKNOWN_ERROR:
console.warn("Error looking up map search input:" + status);
break;
case google.maps.GeocoderStatus.OK:
if( r.length > 0 ){
// create comma-separated lat/lng string
var ll = String(r[0].geometry.location.lat()) + ','
+ String(r[0].geometry.location.lng());
// set geo field's value
$geoinput().val(ll);
}else{
alert(err_msgs.lookup_failed);
}
}
if( status !== google.maps.GeocoderStatus.OK )
clear_geo_field();
};
//
// == Execute the maps geocode request ==
//
geocoder.geocode(geocoderRequest, geoCallback);
return false; // stop event propagation
});// on.('click')
});//doc ready
}(jQuery,window));
/* jshint ignore:end */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment