JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="acf-map" data>

  <div class="marker" data-lat="28.385233" data-lng="-81.563874" data-icon="" data-infowindow="">
    <div class="relative pb-48">
      <img class="absolute w-full h-full mb-2 object-cover object-center" src="http://thefabulous.odns.fr/wp-content/uploads/2020/05/f07c6b9b-fe0f-37d2-a0ba-540ae8b97934.jpg" alt="">
    </div>

    <h5 class="mt-3 text-lg font-bold text-gray-900">Disney World</h5>

    <ul class="mt-4 pb-2 text-gray-700">
      <li class="flex items-center mt-3">
        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 0C5.8363 0 2.46094 3.37535 2.46094 7.53907C2.46094 8.93152 2.73349 10.3697 3.51562 11.4063L10 20L16.4844 11.4063C17.1948 10.4648 17.5391 8.80032 17.5391 7.53907C17.5391 3.37535 14.1637 0 10 0ZM10 4.36645C11.7519 4.36645 13.1726 5.78713 13.1726 7.53905C13.1726 9.291 11.7519 10.7117 10 10.7117C8.24807 10.7117 6.8274 9.291 6.8274 7.53907C6.8274 5.78713 8.24807 4.36645 10 4.36645Z" />
        </svg>
        <span class="ml-2">Disney World, Orlando, FL, États-Unis</span>
      </li>
      <li class="flex items-center mt-3">
        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16.25 12.5H12.5C11.8125 12.5 11.25 11.9375 11.25 11.25C11.25 10.5625 11.8125 10 12.5 10H16.25C16.25 10 20 5.82031 20 3.75C20 1.67969 18.3203 0 16.25 0C14.1797 0 12.5 1.67969 12.5 3.75C12.5 4.74609 13.3672 6.22656 14.2695 7.5H12.5C10.4336 7.5 8.75 9.18359 8.75 11.25C8.75 13.3164 10.4336 15 12.5 15H16.25C16.9375 15 17.5 15.5625 17.5 16.25C17.5 16.9375 16.9375 17.5 16.25 17.5H7.24609C6.62109 18.4687 5.92578 19.3633 5.39844 20H16.25C18.3164 20 20 18.3164 20 16.25C20 14.1836 18.3164 12.5 16.25 12.5ZM16.25 2.5C16.9414 2.5 17.5 3.05859 17.5 3.75C17.5 4.44141 16.9414 5 16.25 5C15.5586 5 15 4.44141 15 3.75C15 3.05859 15.5586...

CSS

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

.hidden {
  display: none; 
}

JavaScript

/* var geoJson_features = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "id": 70,
      "name": "roman coin"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-0.7318782806396484375,
        51.8924376272136740340
      ]
    }
  }]
};

function initialize() {

  // map properties
  var mapProp = {
    zoom: 17,
    zoomControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'night_hawk_style'
      ],
      style: google.maps.MapTypeControlStyle.HORIZONTAL,
      position: google.maps.ControlPosition.BOTTOM_RIGHT,
      backgroundColor: 'none'
    }
  };

  // google map object
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  // load GeoJSON.
  google.maps.event.addListenerOnce(map, 'idle', function() {

    // load GeoJSON.
    map.data.addGeoJson(geoJson_features);

    // create empty bounds object
    var bounds = new google.maps.LatLngBounds();

    // loop through features
    map.data.forEach(function(feature) {

      // get the features geometry
      var geo = feature.getGeometry();

      // loop through each coordinate
      geo.forEachLatLng(function(LatLng) {
        bounds.extend(LatLng);
      });

    });

    // fit data to bounds
    map.fitBounds(bounds);

  });


  // map data styles based on geo json properties
  map.data.setStyle(function(feature) {

    // statusColor
    var statusColor = 'transparent';

    // check feature property status
    if (feature.getProperty('status')) {
      statusColor = feature.getProperty('status');
    }

    // return the style for the feature
    return ({
      icon: {

        // set svg icon svg
        url: 'https://svgshare.com/i/8tN.svg',

        // marker size
        size: new google.maps.Size(14, 12),
        // scaled...