JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" />

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

<script>
	$(function() {
  
    $.getJSON('https://dev.joshmoto.wtf/json/markers.json', function(data) {
        
        console.log(data);

    /* let markers = JSON.parse(request.responseText);
    
    initMap = function() {
    
      let map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: 51.89795747353875,
          lng: -0.722142926324366
        },
        zoom: 10
      });
    
      let lastOpenedInfoWindow = false;
    
      function closeLastOpenedInfoWindow() {
        if (lastOpenedInfoWindow) {
          lastOpenedInfoWindow.close();
        }
      }
    
      for (let i = 0; i < markers.length; i++) {
    
        let marker = new google.maps.Marker({
          position: {
            lat: parseFloat(markers[i].lat),
            lng: parseFloat(markers[i].lng)
          },
          map: map,
          title: markers[i].title
        });
    
        let content = markers[i].content;
    
        let mapObj = {
          "src=": "data-src=",
          "<a href=": "<a target=\"_blank\" href="
        };
    
        let str = content.replace(/src=|<a href=/gi, function(matched) {
          return mapObj[matched];
        });
    
        let infowindow = new google.maps.InfoWindow({
          content: str
        });
    
        marker.addListener('click', function() {
          closeLastOpenedInfoWindow();
          infowindow.setContent((infowindow.content).replace('data-src=', 'src='));
          infowindow.open({
            anchor: marker,
            map
          });
          lastOpenedInfoWindow = infowindow;
        });
    
      }
    } */
    
    });

	});
</script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdhAylteZYxhLBOzLL9OjQHBm3AYyiwRY&callback=initMap"></script> -->

CSS

HTML,
BODY {
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}