CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
froi
froi

Reputation: 7788

Is there a way to display Google Maps without the existing places/buildings and only with custom places/buildings?

Is there a way to display Google Maps without the existing places/buildings and only with custom places/buildings?

I'd like to retain roads, streets, avenues. But for buildings, I would like to exclusively source everything from our database.

Upvotes: 1

Views: 1773

Answers (1)

xomena
xomena

Reputation: 32178

You can hide certain features on maps using styles. This approach is described here:

https://developers.google.com/maps/documentation/javascript/styling

Have a look at the following example that hides points of interest (places) and buildings:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.394035, lng: 2.190287},
    zoom: 17,
    styles: [
      {
        "featureType": "administrative.land_parcel",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "landscape.man_made",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]
  });
}
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>

I hope this helps!

Upvotes: 2

Related Questions