Extend Google Maps field with Places

• JonasVorwerk

• March 22, 2018 at 7:35 pm

Hi everyone,

Does anybody has a solution to add places to the Google Map Field?
Now this field stores lat, lang and a title. But is would also be nice to store the complete place array, or place-id retrieved form Google. Then we can extract the address, url opening hours and so on.

This is what I’ve wrote so far, it retrieves the Google Places data and outputs is in the console but don’t know how to store it in the ACF data field. Any suggestions anybody?

function my_acf_input_admin_footer() {
?>
<script type=”text/javascript”>
(function($) {

acf.add_action(‘google_map_init’, function( map, marker, $field ){

//get the place from textfield
thisplace = $field.find(‘.search’).val();

//get place from Google
getPlace(thisplace);

//if input has changed, retrieve the place again
$($field).change(function(){
thisplace = $field.find(‘.search’).val();
getPlace(thisplace);
});

function getPlace(place){
var request = {
query: place
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}

function callback(results, status) {
console.log(results);
if (status == google.maps.places.PlacesServiceStatus.OK) {
//console.log(results[0].opening_hours);
}
}

});

})(jQuery);
</script>
<?php
}

add_action(‘acf/input/admin_footer’, ‘my_acf_input_admin_footer’);

• eberger3

• June 14, 2018 at 6:45 am

@jonasvorwerk – any luck with this?

I too would like to be able to grab and store the Google Places ID in the WP database along with the lat/lng values.

I’ve been working with your code to try and use AJAX to pass a value to a filter function with

add_filter('acf/update_value/type=google_map', 'my_acf_update_value', 10, 3);

but not having any luck.

• JonasVorwerk

• June 14, 2018 at 5:26 pm

Hi @eberger3,
No I didn’t!
But what worked for me was using the location data. So do a search and then get the all the place details, here is my code, enjoy.
Jonas

$('.hotspots-details').each(function(){
	var location = $(this).attr('data-location');
	
	if(location){
		var request = {
			query: location
		};	
		var service = new google.maps.places.PlacesService(map);
		service.textSearch(request, callbacksingle);
	}
});

and then something like:

function callbacksingle(results, status) {
	
	if (status == google.maps.places.PlacesServiceStatus.OK) {

		var service = new google.maps.places.PlacesService(map);
        service.getDetails({
          placeId: results[0].place_id
        }, function(place, status) {
        	if (status === google.maps.places.PlacesServiceStatus.OK) {
			
				//console.log(place);

				var output;
				output = '';
					
				//address
				if(place.adr_address){
					output += '<h3>Adres</h3>';
					output += place.name+'<br>';
					address = place.adr_address.split(', ');
					for(var i=0; i<address.length; i++){
						output += address[i]+'<br>'; 
					}
				}
				
				//phonenumber
				if(place.formatted_phone_number){
					output += '<a href="tel:'+place.formatted_phone_number+'">'+place.formatted_phone_number+'</a><br>';
				}
				
				//website
				if(place.website){
					output += '<a href="'+place.website+'">'+place.website+'</a><br>';
				}  
	          
				output += '';
	          
				//output everything
				$('.google-data').append(output);
        	}
        });	
	}
}	

• eberger3

• June 19, 2018 at 1:15 am

Thanks @jonasvorwerk – that looks like it would run on every page load because it isn’t saving that info to the DB right?

I think I have this working. I am using the originally posted code to grab Place ID (as well as the other needed elements like lat/lng) and then using an AJAX call to run update_field() to essentially override what the map field is doing.

This assumes that your map field id is map.

<?php

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

function my_acf_input_admin_footer()
{
    global $post;
?>
<script type="text/javascript">
(function($) {

acf.add_action('google_map_init', function( map, marker, $field ){

//get the place from textfield
thisplace = $field.find('.search').val();

//get place from Google
getPlace(thisplace);

//if input has changed, retrieve the place again
$($field).change(function(){
thisplace = $field.find('.search').val();
getPlace(thisplace);
});

function getPlace(place){
var request = {
query: place
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}

function callback(results, status) {
console.log(results);
if (status == google.maps.places.PlacesServiceStatus.OK) {
var place_id = results[0].place_id;
var formatted_address = results[0].formatted_address;
var lat = results[0].geometry.location.lat;
var lng = results[0].geometry.location.lng;

$field.find('.search').val(formatted_address);
var data = {
            'action': 'get_place_id',
            'place_id': place_id,
            'lat' : lat,
            'lng' : lng,
            'address' : formatted_address,
            'post_id' : <?php echo $post->ID; ?>
       };
        jQuery.post(ajaxurl, data, function(response) {
                    console.log('Got this from the server: ' + response);
                });
    }
}

});

})(jQuery);
</script>
<?php
}

add_action('wp_ajax_get_place_id', 'get_place_id');

function get_place_id() {
    $post_id = $post->ID;
    $place_id = $_POST['place_id'];
    $post_id  = $_POST['post_id'];
    $lat      = $_POST['lat'];
    $lng      = $_POST['lng'];
    $address  = $_POST['address'];
    
    $value = array(
        'address' => $address,
        'lat' => $lat,
        'lng' => $lng,
        'place_id' => $place_id
    );
    
    update_field('map', $value, $post_id);
    
    echo $place_id;
    
    wp_die();
}

This seems a little hacky though. It would be great if the ACF Map field pulled in more info from the API and let devs decide what is needed.