I have a Google Map implemented with basic Javascript, where a toggle between Streetview and the normal View. I am NOT talking about remove StreetView Toggles/Controls in normal views.
I want to hide the zoomControls when the StreetView is active. But the config is not working for the zoomControls. It looks like, only some of the options are working (like enableCloseButton).
It’s working for the normal view, but not explicit within the StreetView.
Jsfiddle:
/
(its just cloned from their official documentation and i added the options object)
HTML:
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Disabling the Default UI</title>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
for more information.
-->
<script
src=";callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Javascript:
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
let panorama
function initMap() {
const astorPlace = { lat: 40.729884, lng: -73.990988 }
// Set up the map
const map = new google.maps.Map(document.getElementById("map"), {
center: astorPlace,
zoom: 18,
streetViewControl: false,
})
document.getElementById("toggle").addEventListener("click", toggleStreetView)
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView() // TODO fix type
panorama.setPosition(astorPlace)
panorama.setPov(
/** @type {google.maps.StreetViewPov} */ {
heading: 265,
pitch: 0,
},
)
}
function toggleStreetView() {
const toggle = panorama.getVisible()
panorama.setOptions({
disableDefaultUI: true,
enableCloseButton: true,
linksControl: false,
panControl: false,
zoomControl: false,
scrollwheel: false,
fullscreenControl: false,
motionTracking: false,
motionTrackingControl: false,
addressControl: false,
clickToGo: false,
showRoadLabels: false,
})
if (toggle == false) {
panorama.setVisible(true)
} else {
panorama.setVisible(false)
}
}
window.initMap = initMap
CSS:
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/*
* 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;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
margin-left: -100px;
}
- I’ve read the official documentation about the StreetView options
- I added the options object to remove the
zoomControls: falseas its working within the normal view.
I was expecting the zoomControls in the bottom right corner (the + & -) will be hidden, when the streetView is activated.