How to persistently change Google Maps cluster settings

Hi there,

For the Google Maps component I’d like to change some settings. I have managed to find them in the dmxGoogleMaps.js file and set them as required for my project. But now I need to keep an eye on Wappler updates, overriding this dmxGoogleMaps.js file.

For me it where these two settings:
minimumClusterSize || 2 (instead of 10 or something)
s.maxZoom || 13 (instead of null)

Is there a way to safe these kind of settings in a persistent way?

Any help is greatly appreciated :slight_smile:

bg

Jelle

don’t know if this helps you or not.

I have some custom settings I’m applying to a google map.

At the bottom of my wappler code, I have this:

<script>
function mapinit() {
        var map = document.getElementById("veh_map").dmxComponent.map;
        var mapStyles = [ 
        { 
            "featureType": "administrative", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "road", 
            "elementType": "labels", 
            "stylers": [ { "visibility": "on" } ] 
        },
        { 
            "featureType": "road", 
            "elementType": "geometry.stroke", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "road", 
            "elementType": "geometry.fill", 
            "stylers": [ 
                { "visibility": "on" }, 
                { "color": "#ffffff" }
            ] 
        },
        { 
            "featureType": "transit", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "poi.attraction", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "poi.business", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "poi.government", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "poi.medical", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "poi.park", 
            "elementType": "labels", 
            "stylers": [ { "visibility": "off" } ]                  
        },
        { 
            "featureType": "poi.place_of_worship", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "poi.school", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "poi.sports_complex", 
            "stylers": [ { "visibility": "off" } ] 
        },
        { 
            "featureType": "landscape.man_made", 
            "stylers": [ 
                { "visibility": "on" }, 
                { "color": "#fce8f0" } 
            ] 
        },
        { 
            "featureType": "landscape.natural", 
            "elementType": "labels", 
            "stylers": [ { "visibility": "on" } ] 
        },
        { 
            "featureType": "landscape.natural", 
            "elementType": "geometry", 
            "stylers": [ 
                { "color": "#fce8f0" }, 
                { "visibility": "on" } 
            ] 
        },
        { 
            "featureType": "water", 
            "elementType": "labels", 
            "stylers": [ { "visibility": "on" } ] },
        { } 
    ];  
        var options = { 
            // add here your options which you want to override following the maps docs
            styles: mapStyles
    };
    map.setOptions(options); 
    }
</script>

And on the Map component, this:

<div class="col" id="id_googlemaps">
  <dmx-google-maps id="veh_map" 
... built-in UI map settings here, markers, zoom, lat, lng, etc
...
   onready="mapinit()">
  </dmx-google-maps>

.

Again as an image: