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!
