JSFiddle - React, Tailwind, and code Playground

by Fatih Demir

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;senseo=false&amp;ext=.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>

CSS

#map {
  width: 500px;
  height: 500px;
}

JavaScript

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Bielefeld"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Bielefeld2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Bielefeld3"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Herford"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.676780, 52.118003]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};
var map = null;
var bounds = new google.maps.LatLngBounds();

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

var markerClusterer = new MarkerClusterer(map, [], {
  imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
});
minClusterZoom =...