JSFiddle - React, Tailwind, and code Playground

by Ico Dimchev

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true&amp;libraries=places"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
            height: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

var map;
        var infowindow;

        function initialize() {
            var sofia = new google.maps.LatLng(42.692421, 23.330920);

            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: sofia,
                zoom: 15
            });

            var request = {
                location: sofia,
                radius: 2500,
                types: [
                    'bakery',
                    'book_store',
                    'casino',
                    'food',
                    'movie_theater',
                    'night_club',
                    'police',
                    'restaurant'
                ]
            };
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);
        }

        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                    showResult(results[i]);
                }
            }
        }

        function createMarker(place) {

            var placeLoc = place.geometry.location;

            var image = {
                url: place.icon,
                scaledSize: new google.maps.Size(20, 32),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(0, 32)
            };

            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                animation: google.maps.Animation.DROP,
                icon: image
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }

        function showResult(result) {
           ...