stackoom
  简体   繁体   中英

How to have Google maps search bar sit in a semi-transparent full width div

 原文  2017-08-26 17:07:58  8   1    javascript/ css/ api/ google-maps/ maps

Question

I am stumped. I need to have the search bar sitting in a semi transparent div at the top of the map. I have tried every combination of nesting, not nesting, z-index, and no matter what the search bar sits under the div but I can't click it and it's only visible because the div is transparent...

The issue is with the div I've called class="nav" 

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 43.6615, lng: -70.2553}, zoom: 15 }); var input = document.getElementById('pac-input'); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo('bounds', map); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input); var infowindow = new google.maps.InfoWindow(); var infowindowContent = document.getElementById('infowindow-content'); infowindow.setContent(infowindowContent); var marker = new google.maps.Marker({ map: map }); marker.addListener('click', function() { infowindow.open(map, marker); }); autocomplete.addListener('place_changed', function() { infowindow.close(); var place = autocomplete.getPlace(); if (!place.geometry) { return; } if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(15); } // Set the position of the marker using the place ID and location. marker.setPlace({ placeId: place.place_id, location: place.geometry.location }); marker.setVisible(true); infowindowContent.children['place-name'].textContent = place.name; infowindowContent.children['place-id'].textContent = place.place_id; infowindowContent.children['place-address'].textContent = place.formatted_address; infowindow.open(map, marker); }); } 
 #map { height: 600px; width: 100%; z-index: 1; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .nav { position: absolute; top: 1px; width: 100%; height: 48px; background-color: blue; opacity: .6; z-index: 2; } .controls { position: absolute; float: right; background-color: #fff; border-radius: 2px; border: 1px solid transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); box-sizing: border-box; font-family: Roboto; font-size: 15px; font-weight: 300; height: 29px; margin-left: 17px; margin-right: 17px; margin-top: 10px; outline: none; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 400px; z-index: 10; } .controls:focus { border-color: #4d90fe; z-index: 10; } .title { font-weight: bold; } #infowindow-content { display: none; } #map #infowindow-content { display: inline; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" width="device-width, initial-scale=1"> <title>iBec Map Project</title> <link href="style.css" rel="stylesheet"> </head> <body> <input id="pac-input" class="controls" type="text" placeholder="eg Aurora Provisions"> <div id="map"></div> <div class="nav"></div> <div id="infowindow-content"> <span id="place-name" class="title"></span><br> Place ID <span id="place-id"></span><br> <span id="place-address"></span> </div> <script src="project.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDu3PmYIdOr0EebzqQL2sGQCjrKaUzkONg&libraries=places&callback=initMap" async defer></script> </body> </html>

1 answers

solution1
 0  2017-08-26 17:31:14

You need to remove this line: 

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input);

That is removing the autocomplete input element and adding it to the map (so it is under the "nav" div).

You will then need to adjust its placement (or the placement of the map type controls) to remove the overlap.

proof of concept fiddle

code snippet: 

 #map { height: 600px; width: 100%; z-index: 1; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .nav { position: absolute; top: 1px; width: 100%; height: 48px; background-color: blue; opacity: .6; z-index: 2; } .controls { position: absolute; float: right; background-color: #fff; border-radius: 2px; border: 1px solid transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); box-sizing: border-box; font-family: Roboto; font-size: 15px; font-weight: 300; height: 29px; margin-left: 17px; margin-right: 17px; margin-top: 10px; outline: none; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 400px; z-index: 10; } .controls:focus { border-color: #4d90fe; z-index: 10; } .title { font-weight: bold; } #infowindow-content { display: none; } #map #infowindow-content { display: inline; } 
 <title>iBec Map Project</title> <input id="pac-input" class="controls" type="text" placeholder="eg Aurora Provisions"> <div id="map"></div> <div class="nav"></div> <div id="infowindow-content"> <span id="place-name" class="title"></span><br> Place ID <span id="place-id"></span><br> <span id="place-address"></span> </div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 43.6615, lng: -70.2553 }, zoom: 15 }); var input = document.getElementById('pac-input'); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo('bounds', map); // map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input); var infowindow = new google.maps.InfoWindow(); var infowindowContent = document.getElementById('infowindow-content'); infowindow.setContent(infowindowContent); var marker = new google.maps.Marker({ map: map }); marker.addListener('click', function() { infowindow.open(map, marker); }); autocomplete.addListener('place_changed', function() { infowindow.close(); var place = autocomplete.getPlace(); if (!place.geometry) { return; } if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(15); } // Set the position of the marker using the place ID and location. marker.setPlace({ placeId: place.place_id, location: place.geometry.location }); marker.setVisible(true); infowindowContent.children['place-name'].textContent = place.name; infowindowContent.children['place-id'].textContent = place.place_id; infowindowContent.children['place-address'].textContent = place.formatted_address; infowindow.open(map, marker); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to control css of images on top of a full page semi-transparent overlay div How to create a transparent region (div) over semi-transparent background? Toggle covering a div with semi-transparent component Is there a way to make a semi-transparent div with dynamically placed “holes” putting a semi-transparent div over a highcharts graph Get the resulted background color of a semi-transparent black div? How to put fully transparent divs and text on semi-transparent background How to make a semi-transparent app background with electron? How can I draw multiple semi-transparent rectangles on canvas? How do I make an image semi-transparent?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM