Streaming live at 10am (PST)

Styling (Google) Map Component

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!

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 });
};

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
}
]
}
]

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

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

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