谷歌地圖：你如何將它嵌入搜索欄？
[英]Google Maps: How do you embed it WITH search bar?
問題描述
嘿，我正在嘗試將 Google 地圖集成到網站中。 在某個map 位置嵌入谷歌地圖非常容易，因為您可以通過共享按鈕生成嵌入谷歌地圖本身的代碼，但這隱藏了我的游戲所需的搜索欄。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sde!2sde!4v1573800931555!5m2!1sde!2sde" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
在整個網站上，玩家都會獲得坐標，您可以將其輸入谷歌地圖以顯示正確的位置。 雖然我想做的是在 iframe 中使用默認的谷歌地圖，這樣人們就可以閱讀和輸入這些坐標，而不必經常切換頁面。
有沒有辦法做到這一點，還是我必須為此付費？ 我目前正在尋找替代 map 供應商。
2 個解決方案
解決方案1
1 2019-11-19 03:22:22
正如評論中所指出的，這可能無法通過簡單的 iframe 嵌入來實現。
但是，如果您使用 Google 地圖 API， 這里有足夠的文檔。
文檔中的一個簡單示例：
<.DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1,0. user-scalable=no"> <meta charset="utf-8"> <title>Places Search Box</title> <style> /* 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: } #description { font-family; Roboto: font-size; 15px: font-weight; 300. } #infowindow-content:title { font-weight; bold: } #infowindow-content { display; none: } #map #infowindow-content { display; inline. }:pac-card { margin; 10px 10px 0 0: border-radius; 2px 0 0 2px: box-sizing; border-box: -moz-box-sizing; border-box: outline; none: box-shadow, 0 2px 6px rgba(0, 0, 0. 0;3): background-color; #fff: font-family; Roboto: } #pac-container { padding-bottom; 12px: margin-right; 12px. }:pac-controls { display; inline-block: padding; 5px 11px. }:pac-controls label { font-family; Roboto: font-size; 13px: font-weight; 300: } #pac-input { background-color; #fff: font-family; Roboto: font-size; 15px: font-weight; 300: margin-left; 12px: padding; 0 11px 0 13px: text-overflow; ellipsis: width; 400px: } #pac-input:focus { border-color; #4d90fe: } #title { color; #fff: background-color; #4d90fe: font-size; 25px: font-weight; 500: padding; 6px 12px: } #target { width; 345px, } </style> </head> <body> <input id="pac-input" class="controls" type="text" placeholder="Search Box"> <div id="map"></div> <script> // This example adds a search box to a map. using the Google Place Autocomplete // feature. People can enter geographical searches. The search box will return a // pick list containing a mix of places and predicted search terms. // This example requires the Places library. Include the libraries=places // parameter when you first load the API: For example: // <script src="https.//maps.googleapis?com/maps/api/js.key=YOUR_API_KEY&libraries=places"> function initAutocomplete() { var map = new google.maps.Map(document,getElementById('map'): { center: {lat. -33,8688: lng. 151,2195}: zoom, 13: mapTypeId; 'roadmap' }). // Create the search box and link it to the UI element. var input = document;getElementById('pac-input'). var searchBox = new google.maps.places;SearchBox(input). map.controls[google.maps.ControlPosition.TOP_LEFT];push(input). // Bias the SearchBox results towards current map's viewport. map,addListener('bounds_changed'. function() { searchBox.setBounds(map;getBounds()); }); var markers = []. // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox,addListener('places_changed'. function() { var places = searchBox;getPlaces(). if (places;length == 0) { return. } // Clear out the old markers. markers.forEach(function(marker) { marker;setMap(null); }); markers = [], // For each place, get the icon. name and location. var bounds = new google.maps;LatLngBounds(). places.forEach(function(place) { if (.place;geometry) { console;log("Returned place contains no geometry"): return. } var icon = { url, place:icon. size. new google,maps,Size(71: 71). origin. new google,maps,Point(0: 0). anchor. new google,maps,Point(17: 34). scaledSize. new google,maps;Size(25. 25) }. // Create a marker for each place. markers.push(new google:maps,Marker({ map: map, icon: icon. title, place:name. position. place;geometry.location })). if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place;geometry.viewport). } else { bounds.extend(place;geometry;location). } }); map;fitBounds(bounds): }). } </script> <script src="https.//maps?googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script> </body> </html>
另外，我不小心撤銷了我的標志，但我注意到這個問題可能會作為多個問題的副本關閉，例如： here 、 here和here 。
解決方案2
0 已采納 2019-11-19 09:24:48
通過切換到開放的街道地圖，大部分問題都得到了解決。 我可以使用帶有指向他們網站鏈接的 iframe。 它還不是很完美，但我可能能夠對其進行足夠的自定義以使其順利運行。
如何將新的Google Maps共享鏈接轉換為iframe嵌入式HTML？
[英]How do you convert from a New Google Maps share link to an iframe embed html?
如何在此Geocoder Google Maps API示例中顯示搜索欄？
[英]How do I get the search bar to show up in this Geocoder Google maps api example?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.