JSFiddle - React, Tailwind, and code Playground

by nicolas tenorio

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>

CSS

.labels {
    
    color: red;
    font-family:"Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    }
.labels.active {
    color: grey;
}
.labels.hover {
    color: yellow;
}

JavaScript

var homeLatLng = new google.maps.LatLng(3.4305395, -76.5032124);
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
     
        zoom: 23,
        center: homeLatLng,
      //  mapTypeId: google.maps.MapTypeId.SATELLITE,
        styles: [{
            "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": [{
                "color": "#444444"
            }]
        }, {
            "featureType": "landscape",
            "elementType": "all",
            "stylers": [{
                "color": "#f2f2f2"
            }]
        }, {
            "featureType": "poi",
            "elementType": "all",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "road",
            "elementType": "all",
            "stylers": [{
                "saturation": -100
            }, {
                "lightness": 45
            }]
        }, {
            "featureType": "road.highway",
            "elementType": "all",
            "stylers": [{
                "visibility": "simplified"
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "labels.icon",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "transit",
            "elementType": "all",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "water",
            "elementType": "all",
            "stylers": [{
                "color": "#46bcec"
            }, {
                "visibility": "on"
            }]
        }]

    });

    var icon = {
        url: "http://190.216.202.35//buscarutas/img/tron1.png",
        scaledSize: new google.maps.Size(30, 41),
         Size: new google.maps.Size (100, 100)
    };
var icon1 = {
        url: "http://190.216.202.35//buscarutas/img/tron1.png",
      scaledSize: new...