JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<title>Simple Map</title>
<body>
<div id="map-canvas"></div>
</body>
CSS
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
JavaScript
var map;
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
featureType: 'road',
elementType: 'geometry',
stylers: []
}, {
featureType: 'road',
elementType: 'labels',
stylers: []
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [{
hue: '#ffff00'
}, {
gamma: 1.4
}, {
saturation: 82
}, {
lightness: 96
}]
}, {
featureType: 'poi.school',
elementType: 'geometry',
stylers: [{
hue: '#fff700'
}, {
lightness: -15
}, {
saturation: 99
}]
}, {
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
}, {
featureType: 'poi.school',
elementType: 'geometry',
stylers: [{
visibility: 'on'
},
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
hue: '#fff700'
}, {
lightness: -15
}, {
saturation: 99
}]
}]
};
//////////////////////////////
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
...