JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAl-EDTJ5_uU3zBIX7-wNTu-qSZr1DO5Dw"></script>
<div id="google-container"></div>
CSS
#google-container {
height:500px;
}
JavaScript
jQuery(document).ready(function($){
//set your google maps parameters
var latitude = 51.5255069,
longitude = -0.0836207,
map_zoom = 14;
//google map custom marker icon - .png fallback for IE11
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg';
//define the basic color of your map, plus a value for saturation and brightness
var main_color = '#2d313f',
saturation_value= -20,
brightness_value= 5;
//we define here the style of the map
var style= [
{
//set saturation for the labels on the map
elementType: "labels",
stylers: [
{saturation: saturation_value}
]
},
{ //poi stands for point of interest - don't show these lables on the map
featureType: "poi",
elementType: "labels",
stylers: [
{visibility: "off"}
]
},
{
//don't show highways lables on the map
featureType: 'road.highway',
elementType: 'labels',
stylers: [
{visibility: "off"}
]
},
{
//don't show local road lables on the map
featureType: "road.local",
elementType: "labels.icon",
stylers: [
{visibility: "off"}
]
},
{
//don't show arterial road lables on the map
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [
{visibility: "off"}
]
},
{
//don't show road lables on the map
featureType: "road",
elementType: "geometry.stroke",
stylers: [
{visibility: "off"}
]
},
//style different elements on the map
{
featureType: "transit",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness:...