谷歌地图：你如何将它嵌入搜索栏？
[英]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.