CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Margaret Berry
Margaret Berry

Reputation: 11

Can a custom map icon replace an existing one?

I'm trying to show a marker for Anchor Public Taps using the Google Maps JavaScript API. Anchor Public Taps is right next to Anchor Brewing and run by the same company. Google's automatic labeled orange pin for Anchor Brewing shows up at a wider zoom than the automatic labeled orange pin for Anchor Public Taps.

This is a problem because:

If I add a custom marker, it doesn't come with a label. In the docs I see ways to add a single-letter label, a label that shows on hover, and a pop-up info window, but none of these options look similar to the orange Anchor Brewing pin that is already there.

If I add a custom icon as a marker, when you zoom in, Google's automatic labeled orange pin pops up as well, in addition to and in a slightly different place from my icon.

This is my current code:

<script type="text/javascript">
  function initMap() {
    var tapsMap;
    var image = {
      url: '/assets/public_taps/navy_pt_map_icon.png',
      size: new google.maps.Size(90, 55),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(25, 10),
      scaledSize: new google.maps.Size(80, 45)
    };
    var tapsMapOptions = {
      center: {lat: 37.764044, lng: -122.401244},
      zoom: 17
    };
    var tapsMarker = new google.maps.Marker({
      position: {lat: 37.764044, lng: -122.401244},
      icon: image,
      title: 'Anchor Public Taps'
    });
    tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), tapsMapOptions);
    tapsMarker.setMap(tapsMap);
  }
  initMap();
</script>

Is there a way to have my icon replace the automatic pin? Or is there a way to either hide the Anchor Brewing pin that appears automatically, or to force the automatic Anchor Public Taps pin to show at a wider zoom?

Picture of zoomed in map with double icons

Picture of initial map load

Upvotes: 1

Views: 54

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You can hide all the POIs (google's name for their "automatic labeled orange pin"). (search SO for "hide poi") Or you could just hide the business pois (unfortunately you can't hide just one type of business poi):

var tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), {
  center: {
    lat: 37.764044,
    lng: -122.401244
  },
  zoom: 17,
  styles: [{
    featureType: 'poi.business',
    stylers: [{
      visibility: 'off'
    }]
  }]
});

proof of concept fiddle

screenshot of resulting map

function initMap() {
  var tapsMap;
  var tapsMapOptions = {
    center: {
      lat: 37.764044,
      lng: -122.401244
    },
    zoom: 17,
    styles: [{
      featureType: 'poi.business',
      stylers: [{
        visibility: 'off'
      }]
    }]
  };
  var tapsMarker = new google.maps.Marker({
    position: {
      lat: 37.764044,
      lng: -122.401244
    },
    icon: {
      url: "https://i.sstatic.net/SlO4O.png",
      anchor: new google.maps.Point(62, 12), // anchor at the center of the icon
    },
    title: 'Anchor Public Taps'
  });
  tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), tapsMapOptions);
  tapsMarker.setMap(tapsMap);
}
initMap();
html,
body,
#public-taps-map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="public-taps-map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=3"></script>

Upvotes: 1

Related Questions