v4.9
Currently, I don’t see a way through the UI to do this to a Google Map.
I’d like to know how to add additional “custom” code to execute on a Map.
per this thread: https://developers.google.com/maps/documentation/javascript/style-reference
Simple JSON to further customize the appearance of a map.
This is the map I get with GoogleMaps now (cluttered):
This is the map I’d like (less cluttered):
You can see how FeatureTypes are being shown/hid here:
http://jsfiddle.net/z2576smt/
From the dmx-google-maps component, you can call a javascript function and pass it the map itself using onready:
onready="initMap(this)"
Inside the function you can do anything you want with this map that is available via the google map api:
function initMap(component) {
var map = component.map;
// modify the map object using the google api reference guide
}
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 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 opt = {
// add here your options which you want to override following the maps docs
styles: mapStyles
};
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.
I knew there had to be a Wappler hook to get in there!
Very nice.
Started trying using Ken’s post. But initially it didn’t work. I didn’t have the syntax correct.
Glad Teodor posted - now there’s a model for this. I searched the forum quite a bit and found nothing, so now anything is possible!
@Teodor. Might want to correct this in your sample code for someone else:
Whats the Wappler way to reuse this code on multiple pages? I might use a Map on several pages, but lets say that “mapStyles” variable would be the same and I don’t want to have it redundant everywhere. Can I just as easily move this to my main.ejs file? And if that is yes, is hardcoding it there the best way, or move the function outside of main.ejs?
Ah yes, copy-paste error 
fixed
You can put the map in a partial and move the script to a separate js file, which you can add on your main/layout page.
