JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var edgewater = new google.maps.LatLng(41.987245, -87.661233);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ hue: '#3b3d38' },
{ visibility: 'simplified' },
{ gamma: 0.5 },
{ weight: 0.5 }
]
},
{
featureType: 'water',
stylers: [
{ color: '#3b3d38' }
]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [
{ color: '#3b3d38' },
{ visibility: 'on' }
]
},
{
featureType: 'transit',
stylers: [
{ saturation: '#FFFFFF' },
{ visibility: 'on' }
]
},
{
featureType: 'transit.station.bus',
stylers: [
{ saturation: '#FFFFFF' },
{ visibility: 'on' }
]
},
];
var mapOptions = {
zoom: 13,
center: edgewater,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
var infowindow = new google.maps.InfoWindow();
var latlng1 = new google.maps.LatLng(41.993340, -87.657301);
var marker1 = new google.maps.Marker({
position:latlng1,
map:map,
icon: 'http://i41.tinypic.com/2yla5og.png'});
google.maps.event.addListener(marker1, 'click',
function(){
infowindow.close();//hide the...
CSS
#map_canvas {
height: 100%;
margin: 0px;
padding: 0px
}