Google Maps: How do you embed it WITH search bar?
Question
Hey I'm trying to integrate Google Maps into a website. Embedding Google Maps at a certain map location is quite easy, since you can generate the code for embedding on google maps itself through the share button, but this hides the search bar which I need for my game.
<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>
Throughout the website players get coodrinates which you can enter into google maps to be shown the right location. Though what i would like to do is use the default google maps within an iframe for example so people can read and enter these coordinates without having to switch pages constantly.
Is there a way to do this, or do i have to pay for that? I'm currently looking into alternative map providers.
2 answers
solution1
1 2019-11-19 03:22:22
As was noted in the comments this is probably not possible via the simple iframe embed.
However, if you use the Google Maps API, there is ample documentation for that found here .
A quick example from the docs:
<.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>
Also, I accidently revoked my flag but I noticed that this question could be closed as a duplicate of a number of questions, for example: here , here , and here .
solution2
0 ACCPTED 2019-11-19 09:24:48
Most of the issues were solved by switching to open street maps. I can just use an iframe with a link to their website. It's not quite perfect yet but I may be able to customize it enough to work smoothly.
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.