I’m working on a WordPress website using the Elementor Pro page builder, and I’m trying to integrate a custom-styled Google Map on the “Contact Us” page.
What I’ve done so far:
- Created a project in the Google Cloud Console
- Enabled Maps JavaScript API
- Set up billing
- Generated a valid API key
Integration steps:
- I used Elementor’s “Google Maps” widget and added a container with
id="map". - I added the following script via Elementor’s Integration > Custom Code section:
<script>
function initMap() {
const mapStyle = [{
"elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }]
}, {
"elementType": "labels.icon", "stylers": [{ "visibility": "off" }]
}, {
"elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }]
}, {
"elementType": "labels.text.stroke", "stylers": [{ "color": "#f5f5f5" }]
}, {
"featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [{ "visibility": "off" }]
}, {
"featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [{ "color": "#bdbdbd" }]
}, {
"featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }]
}, {
"featureType": "poi", "elementType": "labels.text", "stylers": [{ "visibility": "off" }]
}, {
"featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }]
}, {
"featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }]
}, {
"featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }]
}, {
"featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }]
}, {
"featureType": "road.arterial", "elementType": "labels", "stylers": [{ "visibility": "off" }]
}, {
"featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [{ "color": "#757575" }]
}, {
"featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#dadada" }]
}, {
"featureType": "road.highway", "elementType": "labels", "stylers": [{ "visibility": "off" }]
}, {
"featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }]
}, {
"featureType": "road.local", "stylers": [{ "visibility": "off" }]
}, {
"featureType": "road.local", "elementType": "labels", "stylers": [{ "visibility": "off" }]
}, {
"featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }]
}, {
"featureType": "transit.line", "elementType": "geometry", "stylers": [{ "color": "#e5e5e5" }]
}, {
"featureType": "transit.station", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }]
}, {
"featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#c9c9c9" }]
}, {
"featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }]
}];
const styledMapType = new google.maps.StyledMapType(mapStyle, { name: 'Styled Map' });
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 26.117184862578004, lng: 50.59311162700443 },
zoom: 13,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'styled_map']
}
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
console.log(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
I removed my API key
The issue:
The map loads, but the custom styling is not applied. It shows the default Google Map instead of the grayscale version I’m trying to achieve.
What I’m expecting:
- A fully styled map in gray scale
- Removal of unnecessary points of interest and labels
Console behavior:
No JavaScript errors except occasionally:
Uncaught (in promise) InvalidValueError: initMap is not a function
My question:
What am I doing wrong?
Is there a conflict with how Elementor loads scripts or with how I’ve structured the initMap function?
Any help or guidance on how to correctly apply custom styles in a Google Map embedded on an Elementor-powered WordPress site would be greatly appreciated.
Thank you in advance!
