Support

Account

Home Forums Backend Issues (wp-admin) Extend Google Maps field with Places

Solving

Extend Google Maps field with Places

  • 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’);

  • @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.

  • 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);
            	}
            });	
    	}
    }	
    
  • 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.

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

You must be logged in to reply to this topic.