@nml
There’s an acf.fields.google_map.maps object. It holds the references to the google maps objects. To change a map type for a single field you have to find the field’s key. So let’s assume that the key is acf-field_56d8b333cb295-57371867cb2db.
So to change the map type simply execute:
acf.fields.google_map.maps['acf-field_56d8b333cb295-57371867cb2db'].setMapTypeId(google.maps.MapTypeId.TERRAIN)
You can replace the TERRAIN with: ROADMAP, SATELLITE or HYBRID.
PS
I don’t where does the key name come from. 56d8b333cb295 is a field key. But I have no idea what does the second part (57371867cb2db) stand for.
<b>// EDIT:</b>
I forgot to say about one important detail. You have to run this code after the google maps API is initialized. As far I know there’s no public hook, so the only way is to run this code inside setIntervalI() and check acf.fields.google_map.status value is ready;
Example:
acf.add_action('load', function () {
var googleMap = acf.fields.google_map;
var interval = setInterval(function () {
if (googleMap.status !== 'ready') {
return;
}
clearInterval(interval);
// Set all the google maps type to HYBRID
$.each(googleMap.maps, (keyName, map) => {
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
});
}, 100);
});
PS
@eliot
I hope you read this topic. I have an idea how to improve the core code a bit. It would be great if acf.fields.google_map.status wasn’t just a regular field. IMO it would be much better if it returned a promise (an instance of $.Deferred()) object.
It’s a much cleaner solution. setInterval() wouldn’t be required then.
Let’s assume that there’s a method like acf.fields.google_map.loadingGoogleMap(). It returns a promise. Consider the following pseudo-implementation:
acf.fields.google_map.loadingGoogleMap = function () {
var deferred = $.Deferred();
$.getScript('http://google.maps.url.js')
.done(function () {
// Google map initialization code goes here...
deferred.resolve();
})
.fail(function () {
deferred.reject();
});
return deferred;
};
And here’s the modified initial code. Now setInterval() is not required.
acf.add_action('load', function () {
var googleMap = acf.fields.google_map;
// This code runs when the 'acf.fields.google_map.loadingGoogleMap' promise is resolved
acf.fields.google_map.loadingGoogleMap.done(function () {
// Set all the google maps type to HYBRID
$.each(googleMap.maps, (keyName, map) => {
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
});
});
});
Simple. Isn’t it?
PPS:
Yes. I know, the promise should be resolved in the google maps callback function, not in the $.getScript().done() callback. This is why I called it pseudo-implementation 🙂
