JSFiddle - React, Tailwind, and code Playground
by Emily Humphrey
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
CSS
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
JavaScript
function initialize() {
var cusLat = [40.85177, 41.00527, 40.71435, 21.03333],
cusLng = [14.26812, 28.97696, -74.00597, 105.85000],
styles = [
{featureType: 'water', elementType: 'geometry.fill', stylers: [{color: '#ffffff'}] },
{featureType: 'landscape.natural', elementType: 'geometry', stylers: [{color: '#E9E9E9'}, { visibility: "simplified" }] },
{featureType: 'all', elementType: 'labels', stylers: [{visibility: "off"}] },
{featureType: 'administrative', elementType: 'geometry', stylers: [{visibility: "off"}] },
{featureType: "road", stylers: [{ visibility: "off" }]},
{featureType: 'poi', elementType: 'all', stylers: [{visibility: "off"}] },
{featureType: "road", stylers: [{ visibility: "off" }]},
{featureType: "transit", stylers: [{ visibility: "off" }]}
],
options = {
center: new google.maps.LatLng(37.98372, 23.72931), zoom: 2, mapTypeIds: ['Styled'],
scrollwheel: false, panControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.small, position: google.maps.ControlPosition.TOP_RIGHT }, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false,
mapTypeId: 'Styled'
},
div = document.getElementById('map_canvas'),
for (var mark=0; mark < cusLat.length; mark++){
var myLatlng = new google.maps.LatLng(cusLat[mark], cusLng[mark]);
var marker = new google.maps.Marker({ position: myLatlng, map: map });
},
map = new google.maps.Map(div, options),
styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);