JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>


<div id="map_canvas"></div>


<!-- Svg filters-->

<svg id="svg-image-blur">
    <filter id="BlurSepia">
        <feGaussianBlur stdDeviation="2" />
        <feColorMatrix values="0.70 0.30 0.30 0 0
                               0.65 0.25 0.25 0 0
                               0.60 0.20 0.20 0 0
                               0 0 0 1 0" />
    </filter>
</svg>

CSS

#map_canvas {
    height:500px;
    -webkit-filter: blur(2px) sepia(100%);
    -moz-filter:url(#BlurSepia);
    -o-filter: url(#BlurSepia);
    -ms-filter: blur(2px) sepia(100%);
    filter: url(#BlurSepia);
}

JavaScript

var map;
function initialize() {
var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(-34.397, 150.644),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);