Dynamically add/remove controls [Google Maps]

Question

I made a custom search bar on my map that needs to overlap some controls that are on there as well, after messing with the z-index of those controls for a while I had no results (controls stay on top). My idea was to hide the controls while searching, though I can't find how to dynamically remove/hide the controls anywhere.

Does anybody have a good solution for this? Adding and removing them, hiding them or z-indexing them properly is all fine.

Answer 1

Use setOptions to change the map's options dynamically (full documentation for Google Maps JavaScript API V3 is here)

// create map
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
  center: myLatlng,
  zoom: 5,
  streetViewControl: false,
  zoomControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


// functions for removing controls dinamically
function toggleMapTypeControl(b) {
  map.setOptions({
    mapTypeControl: b
  });
}

function toggleStreetViewControl(b) {
  map.setOptions({
    streetViewControl: b
  });
}

function toggleZoomControl(b) {
  map.setOptions({
    zoomControl: b
  });
}

#map_canvas {
  width: 50%;
  height: 200px;
  float: left;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<input type="checkbox" onclick="toggleMapTypeControl(this.checked)" />mapTypeControl
<br>
<input type="checkbox" onclick="toggleStreetViewControl(this.checked)" />streetViewControl
<br>
<input type="checkbox" onclick="toggleZoomControl(this.checked)" />zoomControl
<br>

Answer 2

My first thought was to just add z-index: 999999 or something really high to the container I wanted to appear on top, after much struggle and googling, I could not get this to work.

What seems to happen is that when an element is added to the map, it gets a z-index reset to 0. After a while trying, I still could not find a way to let the map keep the css z-index value. Eventually I choose to just go this after adding it to the map.:

$('#element_id').css('z-index', 10);

Because the z-index reset already took place, this seems to work. Not as clean as I would want, but it works.