Map transit line is always clickable

map style doesn't match our cloud styles

by wintlu

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vector Initial Static Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!--   key=AIzaSyBFgs-GdCIXUatJG7A2A_hrbSbHzLGgbkU -->  
    <script
      src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=beta&map_ids=ade88f5df5ab7f24&libraries=places"  
      
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  <div>
  </div>
    <div class="container">
      <div id="map" class="map"></div>
    </div>
    <br/>
    <pre>
    Issue 1: No way to disable transit lines clicking (while keeping other POIs clickable)
    Issue 2: Place details API doesn't return `type` info for transit lines

    To test:
    1. Click the transit line in SF.
    2. Observe the result below, notice that there are no `types` information about the transit line
    </pre>
    <pre id="output">
      
    </pre>
    <div>
     
    </div>



  </body>
</html>

CSS

html,
body,
.container {
  height: 500px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.map {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100%;
}

JavaScript

(function(exports) {
  "use strict";

  function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 37.78, lng: -122.45 },
      zoom: 12,
      mapId: "ade88f5df5ab7f24",
      gestureHandling: "greedy"
    });

    // Add Transit Layer
    const transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);

    // Places Service for fetching details
    const service = new google.maps.places.PlacesService(map);

    // Add Click Event
    map.addListener("click", function(e) {
      console.log('clicked')
      if (e.placeId) {
        e.stop(); // Prevent default info window
        service.getDetails(
          {
            placeId: e.placeId,
          },
          function(place, status) {
            document.getElementById('output').innerHTML = JSON.stringify(place);
          }
        );
      }
    });
  }

  exports.initMap = initMap;
})((this.window = this.window || {}));