如何隐藏 Google 地图 API 本地上下文地图的上下文侧边栏

Question

有没有办法在 Google 地图 Javascript API 中隐藏本地上下文地图自动生成的丑陋边栏？我翻阅了无数帖子，但 none 提到如何隐藏它...?

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });
  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

Answer 1

根据documentation, set placeChooserViewSetup.layoutMode到HIDDEN

示例：

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{
      type: "restaurant"
    },
    {
      type: "tourist_attraction"
    },
  ],
  maxPlaceCount: 12,
  placeChooserViewSetup: {
    layoutMode: google.maps.localContext.PlaceChooserLayoutMode.HIDDEN
  }
});

proof of concept fiddle

代码片段：

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [{
        type: "restaurant"
      },
      {
        type: "tourist_attraction"
      },
    ],
    maxPlaceCount: 12,
    placeChooserViewSetup: {
      layoutMode: google.maps.localContext.PlaceChooserLayoutMode.HIDDEN
    }
  });
  map = localContextMapView.map;
  map.setOptions({
    center: {
      lat: 51.507307,
      lng: -0.08114
    },
    zoom: 14,
  });
}

/* 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;
}

<!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" async></script>
</body>

</html>

如何隐藏 Google 地图 API 本地上下文地图的上下文侧边栏

How to hide context sidebar of Google Maps API Local Context Map

google-maps

google-maps-api-3

google-maps-markers