JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=&amp;sensor=false&amp;extension=.js&amp;libraries=places"></script>
<div id='restaurantmap'></div><input id="pac-input" class="controls" type="text" placeholder="Search...">

CSS

#restaurantmap {height: 550px;width: 975px;max-width:100% !important;}
.gm-style-iw * {display: block;width: 100%;}
.gm-style-iw h4,.gm-style-iw p {margin: 0;padding: 0;}
.gm-style-iw a {color: #4272db;}
.controls {margin-top: 16px;border: 1px solid transparent;border-radius: 2px 0 0 2px;box-sizing: border-box;-moz-box-sizing: border-box;
height: 32px;outline: none;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);}
#pac-input{
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;}
#pac-input:focus{border-color: #4d90fe;margin-left: -1px;padding-left: 14px;width: 401px; 
}
.pac-container {font-family: Roboto;}
#type-selector {color: #fff;background-color: #4d90fe;padding: 5px 11px 0px 11px;}
#type-selector label {font-family: Roboto;font-size: 13px;font-weight: 300;}
#restaurantmap > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div.gm-style-iw > div > div > div > p:nth-child(2) > img {width:100px !important;}

JavaScript

google.maps.event.addDomListener(window, 'load', init);
var map;
var markers = [];

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(48.142265, 11.577987),
        zoom: 12,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: false,
        mapTypeControl: false,
        scaleControl: false,
        scrollwheel: true,
        panControl: true,
        streetViewControl: false,
        draggable: true,
        overviewMapControl: false,
        overviewMapControlOptions: {
            opened: false,
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            "featureType": "water",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#b5cbe4"
            }]
        }, {
            "featureType": "landscape",
            "stylers": [{
                "color": "#efefef"
            }]
        }, {
            "featureType": "road.highway",
            "elementType": "geometry",
            "stylers": [{
                "color": "#83a5b0"
            }]
        }, {
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [{
                "color": "#bdcdd3"
            }]
        }, {
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [{
                "color": "#ffffff"
            }]
        }, {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": [{
                "color": "#e3eed3"
            }]
        }, {
            "featureType": "administrative",
            "stylers": [{
                "visibility": "on"
            }, {
                "lightness": 33
            }]
        }, {
            "featureType": "road"
        }, {
            "featureType": "poi.park",
           ...