How to hide points of interest google maps except my location?

Question

I'm using Google Map API V3 and I noticed there are a lot of markers that are here even though I don't need them. So I want to hide all other locations except mine or without losing my location title.

below is my code

HTML

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

Javascript

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

I already use this code. this helps me but it also removes the location title called "Royal Square"

var noPoi = [
    {
        featureType: "poi",
        elementType: "labels",
        stylers: [
            { 
                visibility: "off" 
            }
        ]   
    }
];
map.setOptions({styles: noPoi});

Answer 1

If you only need "your" marker. Remove all the POI markers, add a marker for the place (POI) you want to appear.

proof of concept fiddle

code snippet:

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>