Home › Forums › Feature Requests › Map field – ability to change a default map type › Reply To: Map field – ability to change a default map type
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 🙂
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.