Reply To: Map field – ability to change a default map type

• wube

• May 14, 2016 at 10:47 pm

@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 🙂