JSFiddle - React, Tailwind, and code Playground

by Faisal Khan Janjua

HTML

<script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVWx-27u_p6O3BmQsIkKea6arcLSz5Ugg"></script>
<div id="searchPageMap"></div>

CSS

#searchPageMap {
  width: 100%;
  height: 100%;
  background: #eee;
  position: absolute;
}

JavaScript

let listdata = [
  {
    "id":53256,
    "title":"157 East 74th Street, Apt 3A",
    "location":"New York, NY, United States",
    "price":"US $2,600,000",
    "shortprice":"$2.6M",
    "url":"https://fgp.frozenfishdev.com/listings/157-east-74th-street-apt-3a/",
    "img":"https://fgp.frozenfishdev.com/wp-content/uploads/2021/04/A.20157_E_74_3A_066-700x467.jpg",
    "position":{
      "lat":40.77163,
      "lng":-73.96069
    },
    "config":{
      "url":"https://fgp.frozenfishdev.com/wp-content/themes/fgp/imgs/mapmarker.png",
      "size": new google.maps.Size(fgp_markerWidth, fgp_markerHeight),
      "origin": new google.maps.Point(0, 0),
      "labelOrigin": new google.maps.Point(12, -10),
      "anchor": new google.maps.Point(fgp_markerWidth * (fgp_markerScale / 2), fgp_markerHeight * fgp_markerScale),
      "scaledSize": new google.maps.Size(fgp_markerWidth * fgp_markerScale, fgp_markerHeight * fgp_markerScale)
    },
    "mapsize": new google.maps.Size(fgp_markerWidth * (fgp_markerScale / 4) * -1, fgp_markerHeight * fgp_markerScale),
  },
  {
    "id":53189,
    "title":"145 Central Park West, 4C",
    "location":"New York, New York, United States",
    "price":"US $24,000,000",
    "shortprice":"$24.0M",
    "url":"https://fgp.frozenfishdev.com/listings/145-central-park-west-4c/",
    "img":"https://fgp.frozenfishdev.com/wp-content/uploads/2021/04/A.20145CentralParkWest_4C_lr1_WEB-700x467.jpg",
    "position":{
      "lat":40.77782,
      "lng":-73.97501
    },
    "config":{
      "url":"https://fgp.frozenfishdev.com/wp-content/themes/fgp/imgs/mapmarker.png",
      "size": new google.maps.Size(fgp_markerWidth, fgp_markerHeight),
      "origin": new google.maps.Point(0, 0),
      "labelOrigin": new google.maps.Point(12, -10),
      "anchor": new google.maps.Point(fgp_markerWidth * (fgp_markerScale / 2), fgp_markerHeight * fgp_markerScale),
      "scaledSize": new google.maps.Size(fgp_markerWidth * fgp_markerScale, fgp_markerHeight * fgp_markerScale)
   ...