Google Maps JavaScript API - Layer Ordering

Question

I have a map that loads building footprints from GeoJSON. My map also uses Street View. Like all Google Maps, Street View is accessed via Pegman. When you click and drag Pegman, the geometries on my map are above the geometries from the Street View geometries.

I would like to know how, or if it's even possible, to place the Street View layer above the Data layer (the layer with GeoJSON shapes) so street, path, and 360 geometries from Street View are above the GeoJSON building footprint geometries.

I've scoured the Google Maps JavaScript API documentation and made numerous Google Searches and cannot find a thing about re-ordering layers as you can with OpenLayers and Leaflet.

Here is a screenshot of the issue. You can see a path and a 360 panorama partially covered by the GeoJSON geometry.

Broeder

You should open a feature request: issuetracker.google.com/… – Earphone

Could you add a snippet with a small example to recreate this problem? That probably will attract more people to help – Tepid

Answer 1

@Dr.Molle has an example of overlaying two maps in this related question: How to put Google Map labels on top?

If you do that and put the GeoJSON data on the lower map, the StreetView layer will be on top of the GeoJSON.

  let map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: {
      lat: 40.7127753,
      lng: -74.0159728
    },
  });
  let map2 = new google.maps.Map(document.getElementById('map2'), {
    mapTypeControl: false,
    backgroundColor: 'hsla(0, 0%, 0%, 0)',
    zoom: map.getZoom(),
    styles: [{
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }]
    }],
    center: map.getCenter(),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.bindTo('center', map2, 'center');
  map.bindTo('zoom', map2, 'zoom');

CSS:

.map {
        width: 100%;
        height: 100%; 
        background:transparent !important;
    }

proof of concept fiddle

code snippet:

function initMap() {
  let map = new google.maps.Map(document.getElementById("map"), {
    zoom: 16,
    center: {
      lat: 40.7127753,
      lng: -74.0159728
    },
  });
  let map2 = new google.maps.Map(document.getElementById('map2'), {
    mapTypeControl: false,
    backgroundColor: 'hsla(0, 0%, 0%, 0)',
    zoom: map.getZoom(),
    styles: [{
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }]
    }],
    center: map.getCenter(),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.bindTo('center', map2, 'center');
  map.bindTo('zoom', map2, 'zoom');
  // Load GeoJSON.
  map.data.addGeoJson(JSON.parse(geoJson));
  // Set the stroke width, and fill color for each polygon
  map.data.setStyle({
    fillColor: "green",
    fillOpacity: 1.0,
    strokeWeight: 1,
  });
}
var geoJson = '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01384776566772,40.71283222634755],[-74.01206677888183,40.71205151790942],[-74.0127105090454,40.71019729868139],[-74.01331132386474,40.71035995155685],[-74.01365464661865,40.71009970676538],[-74.01442712281494,40.71037621682256],[-74.01384776566772,40.71283222634755]]]},"properties":{}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-74.01672381852416,40.71865472137034],[-74.01286143754271,40.718248139094314],[-74.01485700104979,40.71120574010474],[-74.01661653016356,40.711953928711026],[-74.01631612275389,40.71348280971995],[-74.0174533793762,40.71362919010266],[-74.01672381852416,40.71865472137034]]]},"properties":{}}]}'

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

.map {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

<!DOCTYPE html>
<html>

<head>
  <title>Data Layer: Styling</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map" class="map"></div>
  <div id="map2" class="map" style="top:-100%;"></div>
</body>

</html>

Pippin