JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

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

JavaScript

function initMap(){

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: {lat: 20, lng: 0}
    });

    //console.log(dbResults);
    var dbResults = [{location: "42,-72", title: "Here"},
    {location: "45,-112", title: "There"},
    {location: "20,0", title: "Somewhere"}];
    for(var i=0; i<dbResults.length; i++){

        var _coords = dbResults[i].location.split(',');
        var coords = {lat: parseFloat(_coords[0]), lng: parseFloat(_coords[1])}
        //console.log(coords);

        var marker = new google.maps.Marker({
            position: coords,
            map: map
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<div>'+dbResults[i].title+'</div>'
        });

        marker.addListener('click', (function(marker, infowindow) {
            return function(evt) {
            infowindow.open(map, marker);
        }}(marker,infowindow)));
    }

}
google.maps.event.addDomListener(window, "load", initMap);