Streaming live at 10am (PST)

Styling (Google) Map Component

#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!

0 Likes

#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 });
};
0 Likes

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

0 Likes

#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

0 Likes