Multiple Pins with custom markers in google map

by Faisal Khan Janjua

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVWx-27u_p6O3BmQsIkKea6arcLSz5Ugg"></script>
<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" async></script> -->
<button>Load</button>
<div id="searchPageMap"></div>

CSS

#searchPageMap {
  background-color: #e0e0e0;
  height: 40rem;
  max-height: 100vh;
}
.maekerLabel {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  opacity: 1;
  pointer-events: none;
  text-align: center;
  width: 60px;
  white-space: nowrap;
  background: #F00;
}
.mapImgTile {
  width: 200px;
  height: 180px;
  background: #F00;
}

JavaScript

var fgp_map;
var fgp_bounds;
var fgp_locationCount;
var fgp_mapOptions;
var fgp_mapMarkers = [];
var fgp_infoWindow = null;
var fgp_defaultZoom = 14; // The minimum zoom level
var fgp_mapElement = null;

// Set marker attributes. If you need unique values for each marker,
// you can update the values directly in the fgp_locations array.
var fgp_markerWidth = 32;
var fgp_markerHeight = 42;
var fgp_markerScale = 0.75; // Scale the image, if you can't control the source file (0 - 1).

// The array of fgp_locations to mark on the map.
var fgp_locations = [
   {
      "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/",
     ...