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

var markers = [{lat: 41.731047, lng: 1.783573, nom_rocodrom:"1", adreca:"1"},
{lat: 41.73, lng: 1.75, nom_rocodrom:"2", adreca:"2"}];
var lat = [];
var lng = [];
var titol = [];
var adreca = [];
for(var i = 0; i < markers.length; i++){
    lat[i] = markers[i].lat;
    lng[i] = markers[i].lng;
    titol[i] = markers[i].nom_rocodrom;
    adreca[i] = markers[i].adreca;
}
function initMap() {
    var centre = {lat: 41.731047, lng: 1.783573};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: centre
    }); 
    for(var i = 0; i < markers.length; i++){  
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat[i],lng[i]),
            map: map,
            animation: google.maps.Animation.DROP,
            id: i
        });            
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() { 
                var content = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h3 id="firstHeading" class="firstHeading">'+titol[marker.id]+'</h3>'+    
                '<img src="">'+
                '<div id="bodyContent">'+
                '<p>'+adreca[marker.id]+'</p>'+
                '<button type="button" class="btn btn-primary">'+'<a class ="boto_roco" href="/rocodroms/{{ $rocodrom->id }}">Informacio</a>'+'</button>'+
                '</div>'+
                '</div>'
                infowindow.setContent(content);
                infowindow.open(map, marker);  
            }
       })(marker, i)); 
        var infowindow = new google.maps.InfoWindow({maxWidth: 200});
    }   
}
google.maps.event.addDomListener(window, "load", initMap);