Google Maps & Efficiency

Google Maps is a robust platform, and easily the most common tool used for embedding maps into websites. There are a number of WordPress plugins that allow you to embed basic mapping functionality into your website, but occasionally we need to reach beyond those basic needs for a custom map, and there can be a number of considerations that we need to work around. For a recent client project, we had an aim toward performance and privacy that we needed to weave into our Google Maps integration.

If you’ve ever used Google Maps on your phone or computer to get directions, you likely entered the physical address for the location you wanted to go. This is clearly the most user-friendly way to tell the computer where you want to go. Technically, however, behind the scenes Google is geocoding the address – turning the named address into latitude and longitude coordinates – and guiding you to the specific latitude/longitude.

When we’re using WordPress or another Content Management System to enter points that we would like to include in a map, it is also much easier to enter the address name than track down the latitude and longitude.

When placing points within a custom Google Map, latitude and longitude pairs are used. We can use the Google Geocoding API to translate addresses into latitude/longitude pairs, which is common practice.

Most tutorials you’ll find online have you do this when the map is loaded onto the page – for each point on the map, when the page is loaded a request is sent to that Geocoding API, and when the lat/long information is returned a pinpoint is placed on the map.

There are two big downsides to this method – performance and potential cost. From a performance perspective, each of these geocoding requests needs to traverse the Internet to bring back lat/long data on the fly. If the user has a fast internet connection and there are only a small handful of points on the map, there probably won’t be a noticeable slowdown.

If there are a lot of points being mapped, or the user is on a slow or unstable connection, these Internet roundtrips are going to make for a sluggish map. From a cost perspective, each of these geocoding requests counts as an API request for Google – any single request costs less than a penny, but if the site gets popular and/or there are a lot of points being geocoded, this cost can add up pretty quickly.

To mitigate these issues, we moved the geocoding call from an on-demand process when the page with the map embed is visited to a one-time process when the location is saved. Within our WordPress sites, we have a Custom Post Type where we enter the address location using Advanced Custom Fields (ACF).

In addition to the traditional address fields (Street Address, City, State, Zip), we include fields for latitude and longitude that we never touch. When a location is created or saved, we intercept the process (using the ACF hook acf/save_post), and do a few things.

First, we check to see if the location’s address changed – if we’re updating something else on the location but the address was left untouched, we don’t need to worry about geocoding it again. If the address did change, we use the Geocode API to set the latitude and longitude coordinates, then save them to their respective fields. When the map is created on the front end, we feed it these coordinates, eliminating extra API requests and trips to Google’s geocoding servers.

Catching these requests when we add new addresses, rather than each time the maps are displayed, saves our clients’ money and their users’ time. 

// NOTE: SOME VARIABLES WERE DEFINED BEFORE THIS SECTION OF CODE WAS WRITTEN
if (!empty($new_values[$address_field])) {
    // DON'T CHECK IF IT DIDN'T CHANGE AND LAT & LONG EXIST
    if ($prev_values['location_address'] == $new_values[$address_field] && !empty($prev_values['location_latitude']) && !empty($prev_values['location_longitude'])) {
    return;
    }
    // GEOCODE TO GET LAT AND LONGITUDE
    $fullAddress = $new_values[$address_field] . ', ' . $new_values[$address2];
    $address = urlencode($fullAddress);
    // google map geocode api url
    $url = "https://maps.google.com/maps/api/geocode/json?address={$address}&key={$key}";
    // get the json response
    $resp_json = file_get_contents($url);
    // decode the json
    $resp = json_decode($resp_json, true);
    // response status will be 'OK', if able to geocode given address
    if ($resp['status'] == 'OK') {
        $lati = $resp['results'][0]['geometry']['location']['lat'];
        $longi = $resp['results'][0]['geometry']['location']['lng'];
    }
    // UPDATE LAT AND LONG FIELDS
    $_POST['acf'][$latitude_field] = $lati;
    $_POST['acf'][$longitude_field] = $longi;
}