Support

Account

Forum Replies Created

  • Thanks to Elliot’s excellent advice I managed to get this issue resolved.
    I created the address fields required like street, street_number, postcal code, city, country etc. I hide these fields with css, but you might want to show them to your clients.

    I hook into the ready action and have to do a little waiting game before creating the geocoder, this is my first attempt and could be improved upon.
    Listening to the google_map_change event I do a geocode request on the marker and inject the parsed values into the field (id’s). Hope this works as a starter for people trying to get more out of the google maps field.

    Remember, this is a draft at best but should help to get you started.

    
    acf.add_action('ready', function( $el ){
    
        setTimeout(function() {
                doStuf();
            }, 2000)
    
    });
    
    function doStuf() {
        acf.geocoder = new google.maps.Geocoder;
        acf.add_action('google_map_change', function( $el , $para2, $para3) {
    
            var latlng = {lat: $para2.marker.getPosition().lat(), lng: $para2.marker.getPosition().lng()};
            acf.geocoder.geocode({'location': latlng}, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    console.log(results);
                    if (results[0]) {
                        var location = results[0];
                        if(location && location["address_components"] && location["address_components"].length) {
                            location["address_components"].forEach(function (loc_comp) {
    
                                if (loc_comp.types.indexOf("street_number") == 0) {
                                    // number acf-acf-field_5768465c33a83
                                    jQuery("#acf-field_5768465c33a83").val(loc_comp.long_name);
                                }
                                if (loc_comp.types.indexOf("route") == 0) {
                                    // street
                                    jQuery("#acf-field_576824d541746").val(loc_comp.long_name);
                                }
                                if (loc_comp.types.indexOf("locality") == 0) {
                                    // city acf-field_576824ebf4a32
                                    jQuery("#acf-field_576824ebf4a32").val(loc_comp.long_name);
                                }
                                if (loc_comp.types.indexOf("administrative_area_level_1") == 0) {
                                    // province / state acf-field_576824fe14f6c (strip from ,
                                    if (loc_comp.long_name.indexOf(",") != -1) {
                                        loc_comp.long_name = loc_comp.long_name.substr(loc_comp.long_name.indexOf(",") + 1);
                                    }
                                    jQuery("#acf-field_576824fe14f6c").val(loc_comp.long_name);
                                }
                                if (loc_comp.types.indexOf("country") == 0) {
                                    // country  	acf-field_5768250c14f6d
                                    // country_code_iso2 acf-field_5768469733a85
                                    jQuery("#acf-field_5768250c14f6d").val(loc_comp.long_name);
                                    // iso2 country_code_iso2 acf-field_5768469733a85
                                    jQuery("#acf-field_5768469733a85").val(loc_comp.short_name);
                                }
                                if (loc_comp.types.indexOf("postal_code") == 0) {
                                    // postal_code acf-field_5768468633a84
                                    jQuery("#acf-field_5768468633a84").val(loc_comp.long_name);
                                }
    
                            })
                        }
                    } else {
                        window.alert('No results found');
                    }
                } else {
                    window.alert('Geocoder failed due to: ' + status);
                }
            });
        });
    }
    
    
  • I believe it should be possible to get the below api response from google places api for an autocomplete address or from a lat/lng position pretty consistently (same principle is implemented in the Drupal Get Locations plugin). If some or all of the response is not present (e.g. a lat/lng in the ocean) the city/state/country field could be left empty. Shouldn’t this cover most use cases?

    I will see if I can make this work with Elliot’s suggestion about the google_map_change event and hidden fields. But a native solution would be much more preferable.

    “result” : {
    “address_components” : [
    {
    “long_name” : “Amsterdam”,
    “short_name” : “Amsterdam”,
    “types” : [ “locality”, “political” ]
    },
    {
    “long_name” : “Government of Amsterdam”,
    “short_name” : “Government of Amsterdam”,
    “types” : [ “administrative_area_level_2”, “political” ]
    },
    {
    “long_name” : “North Holland”,
    “short_name” : “NH”,
    “types” : [ “administrative_area_level_1”, “political” ]
    },
    {
    “long_name” : “Netherlands”,
    “short_name” : “NL”,
    “types” : [ “country”, “political” ]
    }
    ],

Viewing 2 posts - 1 through 2 (of 2 total)