ACF Google Map Field type

Loops & Logic
1

Is there any plans to implement ACF’s Google Maps Field?

I can get it to work on a post using something like this:

  <Loop field=location_address>
    <Field lat />
  </Loop>

But not using something like this:

<Loop type=location>
  <Loop field=location_address>
    <Field lat />
  </Loop>
</Loop>

I’m assuming I need to change it to something like

<Loop acf_googlemap=location_address>

2

Hey Paul! It looks like that field type isn’t currently supported, but that’s an interesting idea. It seems that using that ACF field requires registering an API key, so that might complicate the implementation of this a bit, but I’ve also heard users requesting a map integration on the front end so I can imagine that combining the ACF Google Map field with some map integration would be pretty valuable. I’ll add it as a feature request for the devs to scope out and we’ll follow up here if/when this is something we’re able to add.

Out of curiosity, other than having a list of possible fields for the ACF map field in the L&L docs, what kind of functionality are you currently missing from your currently-functioning syntax? And what additional benefit would you hope to get out of that second syntax you’re suggesting?

3

Turns out it was a Google Maps conflict with the Divi theme, once I fixed that everything works great.

I’m using this template to set variables for Google Maps API:

<Set name=lat>
  <Loop type=location count=1>
    <Loop field=location_address>
      <Field lat />
    </Loop>
  </Loop>
</Set>
<Set name=lng>
  <Loop type=location count=1>
    <Loop field=location_address>
      <Field lng />
    </Loop>
  </Loop>
</Set>
<Set name=address>
  <Loop field=location_address><Field name />, <br/><Field city /> <Field post_code /></Loop>
</Set>
<Set js=lat><Get name=lat /></Set>
<Set js=lng><Get name=lng /></Set>
<Set js=title><Field title /></Set>
<Set js=address><Get name=address /></Set>

<div id="map" style="height: 450px;"></div>

Then using this in the scripts tab:

jQuery( document ).ready(function($) {

  google.maps.event.addDomListener(window, 'load', init);

  function init() {

	var arr = [ lat, lng ];

	var pointA = new google.maps.LatLng(arr[0], arr[1]);

	var mapOptions = {
	  zoom: 15
	};

	var mapElement = document.getElementById('map');

	var map = new google.maps.Map(mapElement, mapOptions);

	var marker = new google.maps.Marker({
	  position: pointA,
	  map: map,
	  title: title,
	  icon: {
		path: google.maps.SymbolPath.CIRCLE,
		scale: 5,
		fillColor: "#000",
		fillOpacity: 0.9,
	  }

	});

	var marker = new google.maps.Marker({
	  position: pointA,
	  map: map,
	  title: title,
	  animation: google.maps.Animation.BOUNCE
	});

	var infowindow = new google.maps.InfoWindow();
	infowindow.setContent('<div class="infowindow"><h4>'+title+'</h4>'+address+'<a href="https://www.google.com/maps/search/'+title+address+'" target="_blank">Get Directions</a>'+'</div>');
	infowindow.open(map, marker);

  }

});

and the map displays perfectly.

3 Likes
4

wowowow, thanks so much thepauly:)

That is very helpful, NICE! :upside_down_face: