Styling (Google) Map Component

Design help Custom code
1

Hello everybody,

I placed a simple MAP component on my current project and set it up. It works fine.

Now I would like to style the map. For this I created a map style on with the google tool (https://mapstyle.withgoogle.com).

My simple question: Does the map component work with the provided JSON?

I saw some treads about Styling maps but it seemed complicated and I did use the custom code embed instead of the “map component” I would like to use.

I tried to copy/paste the code into the custom code of the page (header, footer, ect.) but it does not work.

Any help with this?

Thanks a lot!

2

Hi @illustregrafik,

How does your custom map style looks like ?
Can you share it here as a code snipet ?

You will need to initialize google maps with javascript within your custom code embed yes, there is no other way.

EDIT:

Here is what the initialization code would look like:

function initMap() {
  
  var lattitude = 40.6148458; // 👉🏻 change the lattitude
  var longitude = -73.8423882; 👉🏻 // change the longitude
  var zoom = 11; // 👉🏻 change the zoom level
    
  var markerLocation = { lat: lattitude, lng: longitude };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: zoom,
    center: markerLocation,
    styles: [/* 😎 your custom style goes here 😎 */]]
  });
  var marker = new google.maps.Marker({ position: markerLocation, map: map });
};
3

Hi @anthonysalamin,
indent preformatted text by 4 spaces
Thanks for the quick reply! All I did is to take the snippet from the style wizard and put .

Your initial code looks convincing. How to add it with the snipped below?

this is the snipped:

[
{
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#212121”
}
]
},
{
“elementType”: “labels.icon”,
“stylers”: [
{
“visibility”: “off”
}
]
},
{
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#757575”
}
]
},
{
“elementType”: “labels.text.stroke”,
“stylers”: [
{
“color”: “#212121”
}
]
},
{
“featureType”: “administrative”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#757575”
}
]
},
{
“featureType”: “administrative.country”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#9e9e9e”
}
]
},
{
“featureType”: “administrative.land_parcel”,
“stylers”: [
{
“visibility”: “off”
}
]
},
{
“featureType”: “administrative.locality”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#bdbdbd”
}
]
},
{
“featureType”: “poi”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#757575”
}
]
},
{
“featureType”: “poi.park”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#181818”
}
]
},
{
“featureType”: “poi.park”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#616161”
}
]
},
{
“featureType”: “poi.park”,
“elementType”: “labels.text.stroke”,
“stylers”: [
{
“color”: “#1b1b1b”
}
]
},
{
“featureType”: “road”,
“elementType”: “geometry.fill”,
“stylers”: [
{
“color”: “#2c2c2c”
}
]
},
{
“featureType”: “road”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#8a8a8a”
}
]
},
{
“featureType”: “road.arterial”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#373737”
}
]
},
{
“featureType”: “road.highway”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#3c3c3c”
}
]
},
{
“featureType”: “road.highway.controlled_access”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#4e4e4e”
}
]
},
{
“featureType”: “road.local”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#616161”
}
]
},
{
“featureType”: “transit”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#757575”
}
]
},
{
“featureType”: “water”,
“elementType”: “geometry”,
“stylers”: [
{
“color”: “#000000”
}
]
},
{
“featureType”: “water”,
“elementType”: “labels.text.fill”,
“stylers”: [
{
“color”: “#3d3d3d”
}
]
}
]

4

Hi @illustregrafik,

I believe you need to get rid of those quotation marks for the attributes before copying the styles into the snipet I provided you.

ok

43

not ok (your snipet)

57

5

Sorry for coming back only now. Thanks a lot. I solved it.

6

This way did not work for me, maybe google changed smt on their API?
However, this thread Google maps styling and location not working - #6 by doksontwerpburo helped me to get the map styled by using a div instead of the googlemaps element.