скрыть достопримечательности Google Maps, кроме моего местоположения

Question

Я использую Google Map API V3 и заметил, что здесь есть много маркеров, хотя они мне и не нужны. Поэтому я хочу скрыть все остальные местоположения, кроме моего или без потери названия местоположения.

ниже мой код

HTML

<div id="map"></div>

JS

var map;
function initMap() {
    var haightAshbury = {lat: 52.5750833, lng: -0.2412917};
  map = new google.maps.Map(document.getElementById('map'), {
    center: haightAshbury,
    zoom: 19,
    mapTypeControl: false
  }); 

Я уже использую этот код. это помогает мне, но также удаляет название моего места под названием "Королевская площадь"

var noPoi = [
    {
        featureType: "poi",
        elementType: "labels",

        stylers: [
          { visibility: "off" }
        ]   
      }
    ];

    map.setOptions({styles: noPoi});

Answer 1

Если вам нужен только «ваш» маркер. Удалите все маркеры POI, добавьте маркер для места (POI), которое вы хотите отобразить.

подтверждение концепции скрипки

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

function initMap() {
  var infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 18
  });

  var RoyalSq = new google.maps.Marker({
    placeId: "ChIJvfdyRztP4DsRfSKksTGiGWs",
    position: {
      lat: 21.232947,
      lng: 72.864397
    },
    map: map
  });
  RoyalSq.addListener('click', function(evt) {
    infowindow.setContent('<div class="poi-info-window gm-style"> <div jstcache="2"> <div class="title full-width" >Royal Square</div> <div class="address"> <div class="address-line full-width">Uttran</div><div class="address-line full-width" >Surat, Gujarat 394105</div><div class="address-line full-width">India</div> </div> </div> <div style="display:none"></div> <div class="view-link"> <a target="_blank" href="https://maps.google.com/maps?ll=21.233067,72.864432&amp;z=20&amp;t=m&amp;hl=en-US&amp;gl=US&amp;mapclient=apiv3&amp;cid=7717377770793476733"> <span> View on Google Maps </span> </a> </div> </div>');
    infowindow.open(map, RoyalSq);
  })
  google.maps.event.trigger(RoyalSq, 'click');
  map.setCenter(RoyalSq.getPosition());
  var noPoi = [{
    featureType: "poi",
    elementType: "labels",

    stylers: [{
      visibility: "off"
    }]
  }];

  map.setOptions({
    styles: noPoi
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.controls {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  height: 29px;
  margin-left: 17px;
  margin-top: 10px;
  outline: none;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

.controls:focus {
  border-color: #4d90fe;
}

.title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>