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 
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:
Thanks for your reply, @Robert_LM. I have this script, as well. But I couldn’t figure out how to format these cluster options in order for it to work with this script.
Settings like ‘geometry.stroke’ are not in this dmxgoogleMaps.js file, so I can’t really compare the way it is formatted.
Someone have any experience with these kind of cluster settings?
Bump on this challenge. @Teodor maybe you can advice on how to persistently set minimumClusterSize || 2 (instead of 10 or something) s.maxZoom || 13 (instead of null) ?
As explained in another topic:
A simple example of how to extend the maps options.
On your page you have a map with an id of maps1:
<dmx-google-maps id="maps1" height="800" address="amsterdam" zoom="15"></dmx-google-maps>
At the bottom of your page add the following:
<script>
function init() {
var map = document.getElementById("maps1").dmxComponent.map;
var opt = {
// here you add the options which you want to override following the maps docs
// example set min zoom to 5 and max zoom to 13:
minZoom: 17,
maxZoom: 13
};
map.setOptions(opt);
}
</script>
finally add onready="init()" to your map code:
<dmx-google-maps id="maps1" height="800" address="amsterdam" zoom="15" onready="init()"></dmx-google-maps>
and you’re done. You just need to find the options you need in google maps docs and add them here.
Thanks for the swift reply. I use this bit of code for adjusting some styles, already. Works great. But, in this case it doesn’t seem to work for the cluster settings.
I tried
var opt = {
// add here your options which you want to override following the maps docs
styles: mapStyles,
minimumClusterSize: 10,
maxZoom: 7
};
Which should not allow clusters of, let’s say 2. But it doesn’t seem to work. It does work when I edit these settings in the dmxGoogleMaps.js file.
But have you checked the google maps docs where they explain how and where to adjust this? Most probably it’s not under options …
Please check their docs.
Thanks Teordor. I did find this article. It suggests to load options for clustering like so:
// Options to pass along to the marker clusterer
const clusterOptions = {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
// Add a marker clusterer to manage the markers.
const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
And load clustering like so:
// Enable marker clustering for this map and these markers
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});
So I tried adding this to above mentioned code:
const clusterOptions = {
minimumClusterSize: 10,
maxZoom: 7
};
map.setOptions(opt, clusterOptions);
}
But, no results.
In the dmxGoogleMaps.js file there is some function for this MarkerClusterer.
function MarkerClusterer(e, t, r) { this.extend(MarkerClusterer, google.maps.OverlayView), this.map_ = e, this.markers_ = [], this.clusters_ = [], this.sizes = [53, 56, 66, 78, 90], this.styles_ = [], this.ready_ = !1; var s = r || {}; this.gridSize_ = s.gridSize || 60, this.minClusterSize_ = s.minimumClusterSize || 2, this.maxZoom_ = s.maxZoom || 13,
It uses e, t, r as iput, I don’t understand how that works. According to the docs the third one should be the MarkerClusterer options, so that would be r. I don’t understand how to influence this r, other than your ealier suggestion.
Thanks for any input given in the right direction.
I’ve made a small update: dmxGoogleMaps.zip (6.8 KB)
The update has 3 extra options: cluster-grid-size, cluster-max-zoom and min-cluster-size. You can use these new options by setting them as an attribute on the dmx-google-maps element.
Awesome, Patrick!
Maybe I don’t understand how it is supposed to work. After replacing my custom dmxGoogleMaps.js with your updated version, I have now added this:
cluster-max-zoom="7" min-cluster-size="20"
to my <dmx-google-maps id=“maps1”. This does not produce expected results, where hardcoding these values in the dmxGoogleMaps.js file does produce these results.
Maybe I am missing some critical step here?
Perhaps it still using the old js file from cache. Will test it myself to see if something is wrong.
These cluster options have been added in Wappler 5.1.5
The options now show up beautifully in latest Wappler:
But sadly the setting does not work for me. I did try to clear cache, open in incognito. It should now not make these clusters, since they are not min 20:
This topic was automatically closed after 47 hours. New replies are no longer allowed.