Support

Account

Home Forums Feature Requests Map field – ability to change a default map type Reply To: Map field – ability to change a default map type

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