Определите правильно, если маркер внутри нарисованного многоугольника

Question

Я должен иметь возможность рисовать прямоугольники, круги и многоугольники на карте и показывать маркеры, которые находятся в границах фигуры.

Это работает правильно для кругов и прямоугольников, но для многоугольников я не делаюкажется, это правильно рассчитать.Я следовал этому учебнику

проблема:

Функции, которые я использую:

lastBounds = lastShape.getBounds();
if (google.maps.geometry.poly.containsLocation(new google.maps.LatLng(hotel.lat, hotel.long), lastShape)) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(hotel.lat, hotel.long),
        map: map,
        title: hotel.name,
        icon: icon
    });
    markers.push(marker);
}

Фрагмент:

/* Tratamiento del mapa */
let drawingManager;
let lastShape;
let map;
let markers = [];
let timeout;
let timeoutwait = 500;
let lastBounds;

function initializeMap() {
  map = new google.maps.Map(document.getElementById('results_map'), {
    zoom: 3,
    center: new google.maps.LatLng(40.415363, -3.707398),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    scrollwheel: false
  });

  /* Cargar la librería para dibujar */
  const shapeOptions = {
    strokeWeight: 2,
    strokeOpacity: 1,
    fillOpacity: 0.2,
    editable: true,
    draggable: true,
    clickable: true,
    strokeColor: '#64358C',
    fillColor: '#64358C'
  };

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControlOptions: {
      drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE]
    },
    rectangleOptions: shapeOptions,
    circleOptions: shapeOptions,
    polygonOptions: shapeOptions,
    Options: shapeOptions,
    drawingControl: false,
    map: map
  });

  /* Escuchar dibujo */
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    if (lastShape != undefined) {
      lastShape.setMap(null);
    }

    if (shift_draw == false) {
      drawingManager.setDrawingMode(null);
    }

    lastShape = e.overlay;
    lastShape.type = e.type;

    lastBounds = lastShape.getBounds();

    clearTimeout(timeout);
    reDrawMapMarkers();

    lastShape.addListener('bounds_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    lastShape.addListener('radius_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    lastShape.addListener('dragend', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    google.maps.event.addListener(lastShape, 'insert_at', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });
  });

  let shift_draw = false;
}

function reDrawMapMarkers() {
  if (markers != undefined) {
    for (let m = 0; m < markers.length; m++) {
      markers[m].setMap(null);
    }
    markers.length = 0;
  }

  const json = [{
      "id": 8585885,
      "hotel": "Hotel name",
      "lat": "1.3",
      "long": "1.33"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-1.3",
      "long": "1.33"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "42.5000",
      "long": "1.5000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "24.0000",
      "long": "54.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "17.0500",
      "long": "-61.8000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "18.2500",
      "long": "-63.1667"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "24.0000",
      "long": "54.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "41.0000",
      "long": "20.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "40.0000",
      "long": "45.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "12.2500",
      "long": "-68.7500"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-12.5000",
      "long": "18.5000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "35.0000",
      "long": "105.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-90.0000",
      "long": "0.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "34.0000",
      "long": "-64.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-14.3333",
      "long": "-170.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "47.3333",
      "long": "13.3333"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-27.0000",
      "long": "133.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "12.5000",
      "long": "-69.9667"
    }
  ];

  var hotels = json;
  var marker;
  lastBounds = lastShape.getBounds();

  const icon = {
    path: "M31.9882812,62 C31.7539051,62 31.5341807,61.9511724 31.3291016,61.8535156 C31.1240224,61.7558589 30.9531257,61.6191415 30.8164062,61.4433594 C30.7773436,61.3847653 30.5087916,61.0283236 30.0107422,60.3740234 C29.5126928,59.7197233 28.8730508,58.816412 28.0917969,57.6640625 C27.310543,56.511713 26.4267627,55.1445392 25.4404297,53.5625 C24.4540966,51.9804608 23.4433646,50.2226659 22.4082031,48.2890625 C21.8027313,47.1562443 21.2265652,46.0283259 20.6796875,44.9052734 C20.1328098,43.7822209 19.6201196,42.6640681 19.1416016,41.5507812 C18.6630835,40.4374944 18.2138693,39.3388726 17.7939453,38.2548828 C17.3740213,37.170893 16.988283,36.1015678 16.6367188,35.046875 C16.2070291,33.699212 15.8261735,32.3759831 15.4941406,31.0771484 C15.1621077,29.7783138 14.8837902,28.4990297 14.6591797,27.2392578 C14.4345692,25.9794859 14.2685552,24.7490294 14.1611328,23.5478516 C14.0537104,22.3466737 14,21.1699276 14,20.0175781 C14,17.537097 14.4687453,15.2031359 15.40625,13.015625 C16.3437547,10.8281141 17.6279215,8.91895347 19.2587891,7.28808594 C20.8896566,5.65721841 22.7988172,4.3681688 24.9863281,3.42089844 C27.1738391,2.47362808 29.5078001,2 31.9882812,2 C34.4687624,2 36.8027234,2.47362808 38.9902344,3.42089844 C41.1777453,4.3681688 43.0869059,5.65721841 44.7177734,7.28808594 C46.348641,8.91895347 47.6328078,10.8281141 48.5703125,13.015625 C49.5078172,15.2031359 49.9765625,17.537097 49.9765625,20.0175781 C49.9765625,21.1699276 49.9228521,22.3466737 49.8154297,23.5478516 C49.7080073,24.7490294 49.5419933,25.9794859 49.3173828,27.2392578 C49.0927723,28.4990297 48.8144548,29.7783138 48.4824219,31.0771484 C48.150389,32.3759831 47.7695334,33.699212 47.3398438,35.046875 C46.9882795,36.1015678 46.6025412,37.170893 46.1826172,38.2548828 C45.7626932,39.3388726 45.313479,40.4374944 44.8349609,41.5507812 C44.3564429,42.6640681 43.8437527,43.7822209 43.296875,44.9052734 C42.7499973,46.0283259 42.1738312,47.1562443 41.5683594,48.2890625 C40.5331979,50.2226659 39.5224659,51.9804608 38.5361328,53.5625 C37.5497998,55.1445392 36.6660195,56.511713 35.8847656,57.6640625 C35.1035117,58.816412 34.4638697,59.7197233 33.9658203,60.3740234 C33.4677709,61.0283236 33.1992189,61.3847653 33.1601562,61.4433594 C33.0234368,61.6191415 32.8525401,61.7558589 32.6474609,61.8535156 C32.4423818,61.9511724 32.2226574,62 31.9882812,62 Z M31.9882812,5.01757812 C29.9179584,5.01757812 27.9746185,5.40819922 26.1582031,6.18945312 C24.3417878,6.97070703 22.7548896,8.04003228 21.3974609,9.39746094 C20.0400323,10.7548896 18.9658243,12.3466706 18.1748047,14.1728516 C17.3837851,15.9990326 16.9882812,17.9472553 16.9882812,20.0175781 C16.9882812,22.4589966 17.2373022,24.9101439 17.7353516,27.3710938 C18.2334009,29.8320436 18.873043,32.219715 19.6542969,34.5341797 C20.4355508,36.8486444 21.2998,39.0556536 22.2470703,41.1552734 C23.1943407,43.2548933 24.1367141,45.1542884 25.0742188,46.8535156 C25.7382846,48.1230532 26.4023404,49.3193303 27.0664062,50.4423828 C27.7304721,51.5654353 28.3652313,52.6005812 28.9707031,53.5478516 C29.5761749,54.4951219 30.1376927,55.3447228 30.6552734,56.0966797 C31.1728542,56.8486366 31.6171856,57.4785131 31.9882812,57.9863281 C32.3593769,57.4589817 32.8037083,56.8193397 33.3212891,56.0673828 C33.8388698,55.3154259 34.4003876,54.465825 35.0058594,53.5185547 C35.6113312,52.5712843 36.2509732,51.5312557 36.9248047,50.3984375 C37.5986362,49.2656193 38.2675748,48.074225 38.9316406,46.8242188 C39.849614,45.1054602 40.7871046,43.2011823 41.7441406,41.1113281 C42.7011767,39.0214739 43.5654258,36.8193475 44.3369141,34.5048828 C45.1084023,32.1904181 45.7431616,29.8076294 46.2412109,27.3564453 C46.7392603,24.9052612 46.9882812,22.4589966 46.9882812,20.0175781 C46.9882812,17.9472553 46.5927774,15.9990326 45.8017578,14.1728516 C45.0107382,12.3466706 43.9365302,10.7548896 42.5791016,9.39746094 C41.2216729,8.04003228 39.6347747,6.97070703 37.8183594,6.18945312 C36.001944,5.40819922 34.0586041,5.01757812 31.9882812,5.01757812 Z M31.9882812,29.0117188 C30.738275,29.0117188 29.5712945,28.7773461 28.4873047,28.3085938 C27.4033149,27.8398414 26.451176,27.1953166 25.6308594,26.375 C24.8105428,25.5546834 24.166018,24.5976617 23.6972656,23.5039062 C23.2285133,22.4101508 22.9941406,21.248053 22.9941406,20.0175781 C22.9941406,18.7675719 23.2285133,17.5957086 23.6972656,16.5019531 C24.166018,15.4081977 24.8105428,14.4560587 25.6308594,13.6455078 C26.451176,12.8349569 27.4033149,12.1953148 28.4873047,11.7265625 C29.5712945,11.2578102 30.738275,11.0234375 31.9882812,11.0234375 C33.2382875,11.0234375 34.405268,11.2578102 35.4892578,11.7265625 C36.5732476,12.1953148 37.5253865,12.8349569 38.3457031,13.6455078 C39.1660197,14.4560587 39.8105445,15.4081977 40.2792969,16.5019531 C40.7480492,17.5957086 40.9824219,18.7675719 40.9824219,20.0175781 C40.9824219,21.248053 40.7480492,22.4101508 40.2792969,23.5039062 C39.8105445,24.5976617 39.1660197,25.5546834 38.3457031,26.375 C37.5253865,27.1953166 36.5732476,27.8398414 35.4892578,28.3085938 C34.405268,28.7773461 33.2382875,29.0117188 31.9882812,29.0117188 Z M31.9882813,14.0117188 C31.1679646,14.0117188 30.3916052,14.1679672 29.6591797,14.4804688 C28.9267542,14.7929703 28.2871121,15.2226535 27.7402344,15.7695312 C27.1933566,16.316409 26.7636734,16.9511683 26.4511719,17.6738281 C26.1386703,18.396488 25.9824219,19.1777302 25.9824219,20.0175781 C25.9824219,20.8378947 26.1386703,21.6142542 26.4511719,22.3466797 C26.7636734,23.0791052 27.1933566,23.7138645 27.7402344,24.2509766 C28.2871121,24.7880886 28.9267542,25.2177718 29.6591797,25.5400391 C30.3916052,25.8623063 31.1679646,26.0234375 31.9882813,26.0234375 C32.8085979,26.0234375 33.5849573,25.8623063 34.3173828,25.5400391 C35.0498083,25.2177718 35.6894504,24.7880886 36.2363281,24.2509766 C36.7832059,23.7138645 37.2128891,23.0791052 37.5253906,22.3466797 C37.8378922,21.6142542 37.9941406,20.8378947 37.9941406,20.0175781 C37.9941406,19.1777302 37.8378922,18.396488 37.5253906,17.6738281 C37.2128891,16.9511683 36.7832059,16.316409 36.2363281,15.7695312 C35.6894504,15.2226535 35.0498083,14.7929703 34.3173828,14.4804688 C33.5849573,14.1679672 32.8085979,14.0117188 31.9882813,14.0117188 Z",
    fillColor: '#FF0000',
    fillOpacity: 0.6,
    anchor: new google.maps.Point(0, 0),
    strokeWeight: 0,
    scale: 0.5
  };

  for (let i = 0; i < hotels.length; i++) {
    var hotel = hotels[i];
    if (lastShape.type == 'circle') {
      if (lastShape.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(hotel.lat, hotel.long),
          map: map,
          title: hotel.name,
          icon: icon
        });
        markers.push(marker);
      }
    } else if (lastShape.type == 'polygon') {
      if (google.maps.geometry.poly.containsLocation(new google.maps.LatLng(hotel.lat, hotel.long), lastShape)) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(hotel.lat, hotel.long),
          map: map,
          title: hotel.name,
          icon: icon
        });
        markers.push(marker);
      }
    } else if (lastBounds.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(hotel.lat, hotel.long),
        map: map,
        title: hotel.name
      });
      markers.push(marker);
    }
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if (document.getElementById('results_map')) {

    google.maps.Circle.prototype.contains = function(latLng) {
      var condition = this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getpxer(), latLng) <= this.getRadius();
      return condition;
    };

    google.maps.Polygon.prototype.getBounds = function() {
      var bounds = new google.maps.LatLngBounds();
      this.getPath().forEach(function(element) {
        bounds.extend(element);
      });
      return (bounds);
    };

    /* init */
    google.maps.event.addDomListener(window, 'load', initializeMap);

    /* dibujar forma */
    let drawShape = document.querySelector('.resultsMap__draw');
    drawShape.addEventListener('click', () => {
      if (!drawShape.classList.contains('resultsMap__draw--active')) {
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
      } else {
        if (lastShape != undefined) {
          lastShape.setMap(null);
        }
      }
      drawShape.classList.toggle('resultsMap__draw--active');
    });
  }
});

.resultsMap {
  position: relative;
  height: 600px;
}

.resultsMap__map-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.resultsMap__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.resultsMap__draw {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
  outline: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  overflow: visible;
  width: auto;
  padding: 0 20px;
  background: #64358C;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 48px;
  position: absolute;
  top: 12px;
  right: 24px
}

.resultsMap__draw--active {
  background: #999
}

.resultsMap__drawText--enabled {
  display: none
}

.resultsMap__draw--active .resultsMap__drawText--enabled {
  display: block
}

.resultsMap__draw--active .resultsMap__drawText--disabled {
  display: none
}

<div class="resultsMap">
  <div class="resultsMap__map-wrapper">
    <div id="results_map" class="resultsMap__map"></div>
  </div>
  <button class="resultsMap__draw">
		<span class="resultsMap__drawText resultsMap__drawText--disabled">Draw on your area</span>
		<span class="resultsMap__drawText resultsMap__drawText--enabled">Remove shape</span>
	</button>
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?&libraries=drawing&key=AIzaSyAmMo-P4OWGs5rZx9bAqeBbFuPCH9Tpp2c"></script>

Есть идеи, почему маркеры снаружи от формы многоугольника все еще выдвигаются?

Answer 1

Якорь для .png (или любого изображения) по умолчанию установлен в нижнем центре.Якорь значка SVG по умолчанию находится в верхнем левом углу.Ваша иконка ~ 70x60, поэтому, чтобы поместить якорь внизу по центру, который является «точкой» иконки), она должна быть приблизительно new google.maps.Point(35, 60).

const icon = {
  path: "M31.9882812,62 C31.7539051,62 31.5341807,61.9511724 31.3291016,61.8535156 C31.1240224,61.7558589 30.9531257,61.6191415 30.8164062,61.4433594 C30.7773436,61.3847653 30.5087916,61.0283236 30.0107422,60.3740234 C29.5126928,59.7197233 28.8730508,58.816412 28.0917969,57.6640625 C27.310543,56.511713 26.4267627,55.1445392 25.4404297,53.5625 C24.4540966,51.9804608 23.4433646,50.2226659 22.4082031,48.2890625 C21.8027313,47.1562443 21.2265652,46.0283259 20.6796875,44.9052734 C20.1328098,43.7822209 19.6201196,42.6640681 19.1416016,41.5507812 C18.6630835,40.4374944 18.2138693,39.3388726 17.7939453,38.2548828 C17.3740213,37.170893 16.988283,36.1015678 16.6367188,35.046875 C16.2070291,33.699212 15.8261735,32.3759831 15.4941406,31.0771484 C15.1621077,29.7783138 14.8837902,28.4990297 14.6591797,27.2392578 C14.4345692,25.9794859 14.2685552,24.7490294 14.1611328,23.5478516 C14.0537104,22.3466737 14,21.1699276 14,20.0175781 C14,17.537097 14.4687453,15.2031359 15.40625,13.015625 C16.3437547,10.8281141 17.6279215,8.91895347 19.2587891,7.28808594 C20.8896566,5.65721841 22.7988172,4.3681688 24.9863281,3.42089844 C27.1738391,2.47362808 29.5078001,2 31.9882812,2 C34.4687624,2 36.8027234,2.47362808 38.9902344,3.42089844 C41.1777453,4.3681688 43.0869059,5.65721841 44.7177734,7.28808594 C46.348641,8.91895347 47.6328078,10.8281141 48.5703125,13.015625 C49.5078172,15.2031359 49.9765625,17.537097 49.9765625,20.0175781 C49.9765625,21.1699276 49.9228521,22.3466737 49.8154297,23.5478516 C49.7080073,24.7490294 49.5419933,25.9794859 49.3173828,27.2392578 C49.0927723,28.4990297 48.8144548,29.7783138 48.4824219,31.0771484 C48.150389,32.3759831 47.7695334,33.699212 47.3398438,35.046875 C46.9882795,36.1015678 46.6025412,37.170893 46.1826172,38.2548828 C45.7626932,39.3388726 45.313479,40.4374944 44.8349609,41.5507812 C44.3564429,42.6640681 43.8437527,43.7822209 43.296875,44.9052734 C42.7499973,46.0283259 42.1738312,47.1562443 41.5683594,48.2890625 C40.5331979,50.2226659 39.5224659,51.9804608 38.5361328,53.5625 C37.5497998,55.1445392 36.6660195,56.511713 35.8847656,57.6640625 C35.1035117,58.816412 34.4638697,59.7197233 33.9658203,60.3740234 C33.4677709,61.0283236 33.1992189,61.3847653 33.1601562,61.4433594 C33.0234368,61.6191415 32.8525401,61.7558589 32.6474609,61.8535156 C32.4423818,61.9511724 32.2226574,62 31.9882812,62 Z M31.9882812,5.01757812 C29.9179584,5.01757812 27.9746185,5.40819922 26.1582031,6.18945312 C24.3417878,6.97070703 22.7548896,8.04003228 21.3974609,9.39746094 C20.0400323,10.7548896 18.9658243,12.3466706 18.1748047,14.1728516 C17.3837851,15.9990326 16.9882812,17.9472553 16.9882812,20.0175781 C16.9882812,22.4589966 17.2373022,24.9101439 17.7353516,27.3710938 C18.2334009,29.8320436 18.873043,32.219715 19.6542969,34.5341797 C20.4355508,36.8486444 21.2998,39.0556536 22.2470703,41.1552734 C23.1943407,43.2548933 24.1367141,45.1542884 25.0742188,46.8535156 C25.7382846,48.1230532 26.4023404,49.3193303 27.0664062,50.4423828 C27.7304721,51.5654353 28.3652313,52.6005812 28.9707031,53.5478516 C29.5761749,54.4951219 30.1376927,55.3447228 30.6552734,56.0966797 C31.1728542,56.8486366 31.6171856,57.4785131 31.9882812,57.9863281 C32.3593769,57.4589817 32.8037083,56.8193397 33.3212891,56.0673828 C33.8388698,55.3154259 34.4003876,54.465825 35.0058594,53.5185547 C35.6113312,52.5712843 36.2509732,51.5312557 36.9248047,50.3984375 C37.5986362,49.2656193 38.2675748,48.074225 38.9316406,46.8242188 C39.849614,45.1054602 40.7871046,43.2011823 41.7441406,41.1113281 C42.7011767,39.0214739 43.5654258,36.8193475 44.3369141,34.5048828 C45.1084023,32.1904181 45.7431616,29.8076294 46.2412109,27.3564453 C46.7392603,24.9052612 46.9882812,22.4589966 46.9882812,20.0175781 C46.9882812,17.9472553 46.5927774,15.9990326 45.8017578,14.1728516 C45.0107382,12.3466706 43.9365302,10.7548896 42.5791016,9.39746094 C41.2216729,8.04003228 39.6347747,6.97070703 37.8183594,6.18945312 C36.001944,5.40819922 34.0586041,5.01757812 31.9882812,5.01757812 Z M31.9882812,29.0117188 C30.738275,29.0117188 29.5712945,28.7773461 28.4873047,28.3085938 C27.4033149,27.8398414 26.451176,27.1953166 25.6308594,26.375 C24.8105428,25.5546834 24.166018,24.5976617 23.6972656,23.5039062 C23.2285133,22.4101508 22.9941406,21.248053 22.9941406,20.0175781 C22.9941406,18.7675719 23.2285133,17.5957086 23.6972656,16.5019531 C24.166018,15.4081977 24.8105428,14.4560587 25.6308594,13.6455078 C26.451176,12.8349569 27.4033149,12.1953148 28.4873047,11.7265625 C29.5712945,11.2578102 30.738275,11.0234375 31.9882812,11.0234375 C33.2382875,11.0234375 34.405268,11.2578102 35.4892578,11.7265625 C36.5732476,12.1953148 37.5253865,12.8349569 38.3457031,13.6455078 C39.1660197,14.4560587 39.8105445,15.4081977 40.2792969,16.5019531 C40.7480492,17.5957086 40.9824219,18.7675719 40.9824219,20.0175781 C40.9824219,21.248053 40.7480492,22.4101508 40.2792969,23.5039062 C39.8105445,24.5976617 39.1660197,25.5546834 38.3457031,26.375 C37.5253865,27.1953166 36.5732476,27.8398414 35.4892578,28.3085938 C34.405268,28.7773461 33.2382875,29.0117188 31.9882812,29.0117188 Z M31.9882813,14.0117188 C31.1679646,14.0117188 30.3916052,14.1679672 29.6591797,14.4804688 C28.9267542,14.7929703 28.2871121,15.2226535 27.7402344,15.7695312 C27.1933566,16.316409 26.7636734,16.9511683 26.4511719,17.6738281 C26.1386703,18.396488 25.9824219,19.1777302 25.9824219,20.0175781 C25.9824219,20.8378947 26.1386703,21.6142542 26.4511719,22.3466797 C26.7636734,23.0791052 27.1933566,23.7138645 27.7402344,24.2509766 C28.2871121,24.7880886 28.9267542,25.2177718 29.6591797,25.5400391 C30.3916052,25.8623063 31.1679646,26.0234375 31.9882813,26.0234375 C32.8085979,26.0234375 33.5849573,25.8623063 34.3173828,25.5400391 C35.0498083,25.2177718 35.6894504,24.7880886 36.2363281,24.2509766 C36.7832059,23.7138645 37.2128891,23.0791052 37.5253906,22.3466797 C37.8378922,21.6142542 37.9941406,20.8378947 37.9941406,20.0175781 C37.9941406,19.1777302 37.8378922,18.396488 37.5253906,17.6738281 C37.2128891,16.9511683 36.7832059,16.316409 36.2363281,15.7695312 C35.6894504,15.2226535 35.0498083,14.7929703 34.3173828,14.4804688 C33.5849573,14.1679672 32.8085979,14.0117188 31.9882813,14.0117188 Z",
  fillColor: '#FF0000',
  fillOpacity: 0.6,
  anchor: new google.maps.Point(35, 60),
  strokeWeight: 0,
  scale: 0.5
};

доказательство концепции скрипки

фрагмент кода:

/* Tratamiento del mapa */
let drawingManager;
let lastShape;
let map;
let markers = [];
let timeout;
let timeoutwait = 500;
let lastBounds;

function initializeMap() {
  map = new google.maps.Map(document.getElementById('results_map'), {
    zoom: 3,
    center: new google.maps.LatLng(40.415363, -3.707398),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    scrollwheel: false
  });

  /* Cargar la librería para dibujar */
  const shapeOptions = {
    strokeWeight: 2,
    strokeOpacity: 1,
    fillOpacity: 0.2,
    editable: true,
    draggable: true,
    clickable: true,
    strokeColor: '#64358C',
    fillColor: '#64358C'
  };

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControlOptions: {
      drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE]
    },
    rectangleOptions: shapeOptions,
    circleOptions: shapeOptions,
    polygonOptions: shapeOptions,
    Options: shapeOptions,
    drawingControl: false,
    map: map
  });

  /* Escuchar dibujo */
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    if (lastShape != undefined) {
      lastShape.setMap(null);
    }

    if (shift_draw == false) {
      drawingManager.setDrawingMode(null);
    }

    lastShape = e.overlay;
    lastShape.type = e.type;
    console.log("lastShape.type=" + lastShape.type);
    lastBounds = lastShape.getBounds();

    clearTimeout(timeout);
    reDrawMapMarkers();

    lastShape.addListener('bounds_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    lastShape.addListener('radius_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    lastShape.addListener('dragend', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    google.maps.event.addListener(lastShape, 'insert_at', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });
  });

  let shift_draw = false;
}

function reDrawMapMarkers() {
  if (markers != undefined) {
    for (let m = 0; m < markers.length; m++) {
      markers[m].setMap(null);
    }
    markers.length = 0;
  }

  const json = [{
      "id": 8585885,
      "hotel": "Hotel name",
      "lat": "1.3",
      "long": "1.33"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-1.3",
      "long": "1.33"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "42.5000",
      "long": "1.5000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "24.0000",
      "long": "54.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "17.0500",
      "long": "-61.8000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "18.2500",
      "long": "-63.1667"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "24.0000",
      "long": "54.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "41.0000",
      "long": "20.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "40.0000",
      "long": "45.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "12.2500",
      "long": "-68.7500"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-12.5000",
      "long": "18.5000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "35.0000",
      "long": "105.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-90.0000",
      "long": "0.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "34.0000",
      "long": "-64.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-14.3333",
      "long": "-170.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "47.3333",
      "long": "13.3333"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-27.0000",
      "long": "133.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "12.5000",
      "long": "-69.9667"
    }
  ];

  var hotels = json;
  var marker;
  lastBounds = lastShape.getBounds();

  const icon = {
    path: "M31.9882812,62 C31.7539051,62 31.5341807,61.9511724 31.3291016,61.8535156 C31.1240224,61.7558589 30.9531257,61.6191415 30.8164062,61.4433594 C30.7773436,61.3847653 30.5087916,61.0283236 30.0107422,60.3740234 C29.5126928,59.7197233 28.8730508,58.816412 28.0917969,57.6640625 C27.310543,56.511713 26.4267627,55.1445392 25.4404297,53.5625 C24.4540966,51.9804608 23.4433646,50.2226659 22.4082031,48.2890625 C21.8027313,47.1562443 21.2265652,46.0283259 20.6796875,44.9052734 C20.1328098,43.7822209 19.6201196,42.6640681 19.1416016,41.5507812 C18.6630835,40.4374944 18.2138693,39.3388726 17.7939453,38.2548828 C17.3740213,37.170893 16.988283,36.1015678 16.6367188,35.046875 C16.2070291,33.699212 15.8261735,32.3759831 15.4941406,31.0771484 C15.1621077,29.7783138 14.8837902,28.4990297 14.6591797,27.2392578 C14.4345692,25.9794859 14.2685552,24.7490294 14.1611328,23.5478516 C14.0537104,22.3466737 14,21.1699276 14,20.0175781 C14,17.537097 14.4687453,15.2031359 15.40625,13.015625 C16.3437547,10.8281141 17.6279215,8.91895347 19.2587891,7.28808594 C20.8896566,5.65721841 22.7988172,4.3681688 24.9863281,3.42089844 C27.1738391,2.47362808 29.5078001,2 31.9882812,2 C34.4687624,2 36.8027234,2.47362808 38.9902344,3.42089844 C41.1777453,4.3681688 43.0869059,5.65721841 44.7177734,7.28808594 C46.348641,8.91895347 47.6328078,10.8281141 48.5703125,13.015625 C49.5078172,15.2031359 49.9765625,17.537097 49.9765625,20.0175781 C49.9765625,21.1699276 49.9228521,22.3466737 49.8154297,23.5478516 C49.7080073,24.7490294 49.5419933,25.9794859 49.3173828,27.2392578 C49.0927723,28.4990297 48.8144548,29.7783138 48.4824219,31.0771484 C48.150389,32.3759831 47.7695334,33.699212 47.3398438,35.046875 C46.9882795,36.1015678 46.6025412,37.170893 46.1826172,38.2548828 C45.7626932,39.3388726 45.313479,40.4374944 44.8349609,41.5507812 C44.3564429,42.6640681 43.8437527,43.7822209 43.296875,44.9052734 C42.7499973,46.0283259 42.1738312,47.1562443 41.5683594,48.2890625 C40.5331979,50.2226659 39.5224659,51.9804608 38.5361328,53.5625 C37.5497998,55.1445392 36.6660195,56.511713 35.8847656,57.6640625 C35.1035117,58.816412 34.4638697,59.7197233 33.9658203,60.3740234 C33.4677709,61.0283236 33.1992189,61.3847653 33.1601562,61.4433594 C33.0234368,61.6191415 32.8525401,61.7558589 32.6474609,61.8535156 C32.4423818,61.9511724 32.2226574,62 31.9882812,62 Z M31.9882812,5.01757812 C29.9179584,5.01757812 27.9746185,5.40819922 26.1582031,6.18945312 C24.3417878,6.97070703 22.7548896,8.04003228 21.3974609,9.39746094 C20.0400323,10.7548896 18.9658243,12.3466706 18.1748047,14.1728516 C17.3837851,15.9990326 16.9882812,17.9472553 16.9882812,20.0175781 C16.9882812,22.4589966 17.2373022,24.9101439 17.7353516,27.3710938 C18.2334009,29.8320436 18.873043,32.219715 19.6542969,34.5341797 C20.4355508,36.8486444 21.2998,39.0556536 22.2470703,41.1552734 C23.1943407,43.2548933 24.1367141,45.1542884 25.0742188,46.8535156 C25.7382846,48.1230532 26.4023404,49.3193303 27.0664062,50.4423828 C27.7304721,51.5654353 28.3652313,52.6005812 28.9707031,53.5478516 C29.5761749,54.4951219 30.1376927,55.3447228 30.6552734,56.0966797 C31.1728542,56.8486366 31.6171856,57.4785131 31.9882812,57.9863281 C32.3593769,57.4589817 32.8037083,56.8193397 33.3212891,56.0673828 C33.8388698,55.3154259 34.4003876,54.465825 35.0058594,53.5185547 C35.6113312,52.5712843 36.2509732,51.5312557 36.9248047,50.3984375 C37.5986362,49.2656193 38.2675748,48.074225 38.9316406,46.8242188 C39.849614,45.1054602 40.7871046,43.2011823 41.7441406,41.1113281 C42.7011767,39.0214739 43.5654258,36.8193475 44.3369141,34.5048828 C45.1084023,32.1904181 45.7431616,29.8076294 46.2412109,27.3564453 C46.7392603,24.9052612 46.9882812,22.4589966 46.9882812,20.0175781 C46.9882812,17.9472553 46.5927774,15.9990326 45.8017578,14.1728516 C45.0107382,12.3466706 43.9365302,10.7548896 42.5791016,9.39746094 C41.2216729,8.04003228 39.6347747,6.97070703 37.8183594,6.18945312 C36.001944,5.40819922 34.0586041,5.01757812 31.9882812,5.01757812 Z M31.9882812,29.0117188 C30.738275,29.0117188 29.5712945,28.7773461 28.4873047,28.3085938 C27.4033149,27.8398414 26.451176,27.1953166 25.6308594,26.375 C24.8105428,25.5546834 24.166018,24.5976617 23.6972656,23.5039062 C23.2285133,22.4101508 22.9941406,21.248053 22.9941406,20.0175781 C22.9941406,18.7675719 23.2285133,17.5957086 23.6972656,16.5019531 C24.166018,15.4081977 24.8105428,14.4560587 25.6308594,13.6455078 C26.451176,12.8349569 27.4033149,12.1953148 28.4873047,11.7265625 C29.5712945,11.2578102 30.738275,11.0234375 31.9882812,11.0234375 C33.2382875,11.0234375 34.405268,11.2578102 35.4892578,11.7265625 C36.5732476,12.1953148 37.5253865,12.8349569 38.3457031,13.6455078 C39.1660197,14.4560587 39.8105445,15.4081977 40.2792969,16.5019531 C40.7480492,17.5957086 40.9824219,18.7675719 40.9824219,20.0175781 C40.9824219,21.248053 40.7480492,22.4101508 40.2792969,23.5039062 C39.8105445,24.5976617 39.1660197,25.5546834 38.3457031,26.375 C37.5253865,27.1953166 36.5732476,27.8398414 35.4892578,28.3085938 C34.405268,28.7773461 33.2382875,29.0117188 31.9882812,29.0117188 Z M31.9882813,14.0117188 C31.1679646,14.0117188 30.3916052,14.1679672 29.6591797,14.4804688 C28.9267542,14.7929703 28.2871121,15.2226535 27.7402344,15.7695312 C27.1933566,16.316409 26.7636734,16.9511683 26.4511719,17.6738281 C26.1386703,18.396488 25.9824219,19.1777302 25.9824219,20.0175781 C25.9824219,20.8378947 26.1386703,21.6142542 26.4511719,22.3466797 C26.7636734,23.0791052 27.1933566,23.7138645 27.7402344,24.2509766 C28.2871121,24.7880886 28.9267542,25.2177718 29.6591797,25.5400391 C30.3916052,25.8623063 31.1679646,26.0234375 31.9882813,26.0234375 C32.8085979,26.0234375 33.5849573,25.8623063 34.3173828,25.5400391 C35.0498083,25.2177718 35.6894504,24.7880886 36.2363281,24.2509766 C36.7832059,23.7138645 37.2128891,23.0791052 37.5253906,22.3466797 C37.8378922,21.6142542 37.9941406,20.8378947 37.9941406,20.0175781 C37.9941406,19.1777302 37.8378922,18.396488 37.5253906,17.6738281 C37.2128891,16.9511683 36.7832059,16.316409 36.2363281,15.7695312 C35.6894504,15.2226535 35.0498083,14.7929703 34.3173828,14.4804688 C33.5849573,14.1679672 32.8085979,14.0117188 31.9882813,14.0117188 Z",
    fillColor: '#FF0000',
    fillOpacity: 0.6,
    anchor: new google.maps.Point(35, 60),
    strokeWeight: 0,
    scale: 0.5
  };
  console.log("redrawMarkers length=" + hotels.length);
  for (let i = 0; i < hotels.length; i++) {
    var hotel = hotels[i];
    console.log("hotel " + i + " =" + lastShape.type);
    if (lastShape.type == 'circle') {
      if (lastShape.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(hotel.lat, hotel.long),
          map: map,
          title: hotel.name,
          icon: icon
        });
        markers.push(marker);
      }
    } else if (lastShape.type == 'polygon') {
      if (google.maps.geometry.poly.containsLocation(new google.maps.LatLng(hotel.lat, hotel.long), lastShape)) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(hotel.lat, hotel.long),
          map: map,
          title: hotel.name,
          icon: icon
        });
        markers.push(marker);
      }
    } else if (lastBounds.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
      console.log("lastBounds contains " + i);
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(hotel.lat, hotel.long),
        map: map,
        title: hotel.name
      });
      markers.push(marker);
    }
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if (document.getElementById('results_map')) {

    google.maps.Circle.prototype.contains = function(latLng) {
      var condition = this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getpxer(), latLng) <= this.getRadius();
      return condition;
    };

    google.maps.Polygon.prototype.getBounds = function() {
      var bounds = new google.maps.LatLngBounds();
      this.getPath().forEach(function(element) {
        bounds.extend(element);
      });
      return (bounds);
    };

    /* init */
    google.maps.event.addDomListener(window, 'load', initializeMap);

    /* dibujar forma */
    let drawShape = document.querySelector('.resultsMap__draw');
    drawShape.addEventListener('click', () => {
      if (!drawShape.classList.contains('resultsMap__draw--active')) {
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
      } else {
        if (lastShape != undefined) {
          lastShape.setMap(null);
        }
      }
      drawShape.classList.toggle('resultsMap__draw--active');
    });
  }
});

.resultsMap {
  position: relative;
  height: 600px;
}

.resultsMap__map-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.resultsMap__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.resultsMap__draw {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
  outline: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  overflow: visible;
  width: auto;
  padding: 0 20px;
  background: #64358C;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 48px;
  position: absolute;
  top: 12px;
  right: 24px
}

.resultsMap__draw--active {
  background: #999
}

.resultsMap__drawText--enabled {
  display: none
}

.resultsMap__draw--active .resultsMap__drawText--enabled {
  display: block
}

.resultsMap__draw--active .resultsMap__drawText--disabled {
  display: none
}

<div class="resultsMap">
  <div class="resultsMap__map-wrapper">
    <div id="results_map" class="resultsMap__map"></div>
  </div>
  <button class="resultsMap__draw">
		<span class="resultsMap__drawText resultsMap__drawText--disabled">Draw on your area</span>
		<span class="resultsMap__drawText resultsMap__drawText--enabled">Remove shape</span>
	</button>
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?&libraries=drawing"></script>

Answer 2

Если у вас есть проблемы с ключами API в фрагментах кода, не включайте ключ ...

Теперь о вашем коде, и хотя это действительно не то, что я называю минимальный Код, я могу сказать, что он работает, как ожидалось.Только ваши собственные значки маркеров не отображаются в правильном месте.

Проверьте код ниже с маркерами по умолчанию.Работает нормально.

Посмотрите документацию о Icon .Скорее всего, этот вопрос должен быть с вашей точкой привязки.

1012 *

/* Tratamiento del mapa */
let drawingManager;
let lastShape;
let map;
let markers = [];
let timeout;
let timeoutwait = 500;
let lastBounds;

function initializeMap() {
  map = new google.maps.Map(document.getElementById('results_map'), {
    zoom: 3,
    center: new google.maps.LatLng(40.415363, -3.707398),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    scrollwheel: false
  });

  /* Cargar la librería para dibujar */
  const shapeOptions = {
    strokeWeight: 2,
    strokeOpacity: 1,
    fillOpacity: 0.2,
    editable: true,
    draggable: true,
    clickable: true,
    strokeColor: '#64358C',
    fillColor: '#64358C'
  };

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControlOptions: {
      drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE]
    },
    rectangleOptions: shapeOptions,
    circleOptions: shapeOptions,
    polygonOptions: shapeOptions,
    Options: shapeOptions,
    drawingControl: false,
    map: map
  });

  /* Escuchar dibujo */
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    if (lastShape != undefined) {
      lastShape.setMap(null);
    }

    if (shift_draw == false) {
      drawingManager.setDrawingMode(null);
    }

    lastShape = e.overlay;
    lastShape.type = e.type;

    lastBounds = lastShape.getBounds();

    clearTimeout(timeout);
    reDrawMapMarkers();

    lastShape.addListener('bounds_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    lastShape.addListener('radius_changed', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    lastShape.addListener('dragend', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });

    google.maps.event.addListener(lastShape, 'insert_at', function() {
      lastBounds = lastShape.getBounds();
      clearTimeout(timeout);
      timeout = setTimeout(reDrawMapMarkers, timeoutwait);
    });
  });

  let shift_draw = false;
}

function reDrawMapMarkers() {
  if (markers != undefined) {
    for (let m = 0; m < markers.length; m++) {
      markers[m].setMap(null);
    }
    markers.length = 0;
  }

  const json = [{
      "id": 8585885,
      "hotel": "Hotel name",
      "lat": "1.3",
      "long": "1.33"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-1.3",
      "long": "1.33"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "42.5000",
      "long": "1.5000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "24.0000",
      "long": "54.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "17.0500",
      "long": "-61.8000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "18.2500",
      "long": "-63.1667"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "24.0000",
      "long": "54.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "41.0000",
      "long": "20.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "40.0000",
      "long": "45.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "12.2500",
      "long": "-68.7500"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-12.5000",
      "long": "18.5000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "35.0000",
      "long": "105.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-90.0000",
      "long": "0.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "34.0000",
      "long": "-64.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-14.3333",
      "long": "-170.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "47.3333",
      "long": "13.3333"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "-27.0000",
      "long": "133.0000"
    },
    {
      "id": 8585886,
      "hotel": "Hotel name 1",
      "lat": "12.5000",
      "long": "-69.9667"
    }
  ];

  var hotels = json;
  var marker;
  lastBounds = lastShape.getBounds();

  for (let i = 0; i < hotels.length; i++) {
    var hotel = hotels[i];
    if (lastShape.type == 'circle') {
      if (lastShape.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(hotel.lat, hotel.long),
          map: map,
          title: hotel.name,
        });
        markers.push(marker);
      }
    } else if (lastShape.type == 'polygon') {
      if (google.maps.geometry.poly.containsLocation(new google.maps.LatLng(hotel.lat, hotel.long), lastShape)) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(hotel.lat, hotel.long),
          map: map,
          title: hotel.name,
        });
        markers.push(marker);
      }
    } else if (lastBounds.contains(new google.maps.LatLng(hotel.lat, hotel.long))) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(hotel.lat, hotel.long),
        map: map,
        title: hotel.name
      });
      markers.push(marker);
    }
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if (document.getElementById('results_map')) {

    google.maps.Circle.prototype.contains = function(latLng) {
      var condition = this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getpxer(), latLng) <= this.getRadius();
      return condition;
    };

    google.maps.Polygon.prototype.getBounds = function() {
      var bounds = new google.maps.LatLngBounds();
      this.getPath().forEach(function(element) {
        bounds.extend(element);
      });
      return (bounds);
    };

    /* init */
    google.maps.event.addDomListener(window, 'load', initializeMap);

    /* dibujar forma */
    let drawShape = document.querySelector('.resultsMap__draw');
    drawShape.addEventListener('click', () => {
      if (!drawShape.classList.contains('resultsMap__draw--active')) {
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
      } else {
        if (lastShape != undefined) {
          lastShape.setMap(null);
        }
      }
      drawShape.classList.toggle('resultsMap__draw--active');
    });
  }
});

.resultsMap {
  position: relative;
  height: 600px;
}

.resultsMap__map-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.resultsMap__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.resultsMap__draw {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: default;
  outline: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  overflow: visible;
  width: auto;
  padding: 0 20px;
  background: #64358C;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 48px;
  position: absolute;
  top: 12px;
  right: 24px
}

.resultsMap__draw--active {
  background: #999
}

.resultsMap__drawText--enabled {
  display: none
}

.resultsMap__draw--active .resultsMap__drawText--enabled {
  display: block
}

.resultsMap__draw--active .resultsMap__drawText--disabled {
  display: none
}

<div class="resultsMap">
  <div class="resultsMap__map-wrapper">
    <div id="results_map" class="resultsMap__map"></div>
  </div>
  <button class="resultsMap__draw">
		<span class="resultsMap__drawText resultsMap__drawText--disabled">Draw on your area</span>
		<span class="resultsMap__drawText resultsMap__drawText--enabled">Remove shape</span>
	</button>
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?&libraries=drawing"></script>