JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
<div class="wrapper">

<div id="map"></div>
    
</div>

CSS

html, body, #map {
    margin: 0;
    padding: 0;
    height: 500px;
    width:500px;
}

.wrapper {padding:20px;}

JavaScript

//http://www.evoluted.net/thinktank/web-design/custom-google-maps-style-tool
var map, infowindow;

function initialize() {
    //Leipzig
    var latlng = new google.maps.LatLng(51.352621, 12.36022);

    var styles = [{
        featureType: "landscape",
        stylers: [{
            color: '#eeddee'
        }]
    }, {
        featureType: "natural",
        stylers: [{
            hue: '#ff0000'
        }]
    }, {
        featureType: "road",
        stylers: [{
            hue: '#5500aa'
        }, {
            saturation: -70
        }]
    }, {
        featureType: "building",
        elementType: "labels",
        stylers: [{
            hue: '#000066'
        }]
    }, {
        featureType: "poi", //points of interest
        stylers: [{
            hue: '#0044ff'
        }]
    }];

    var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        styles: styles
    };
    map = new google.maps.Map(document.getElementById('map'), myOptions);

    var request = {
        location: latlng,
        radius: 2000,
        types: ['store']
    };
    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]);
        }
    }
}

function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });

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