有沒有一種方法可以將Google API地圖上infoWindow的信息放置在地圖上而不是標記上？

Question

很好地嘗試將信息放置在地圖下，它確實在標記infoWindows上顯示了信息，我正在嘗試將信息放置在地圖下。 我想把它放在盒子上。 所有這些代碼都很好用，但是我想得太多了，我對從哪里開始一無所知。

 //this code writes the map function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 39.790117, lng: -96.584307 }, zoom: 4, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); //this code is for the search box var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input, null); google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); for (i = 0; place = places[i]; i++) { console.log('testing'); bounds.extend(place.geometry.location); } map.fitBounds(bounds); map.setZoom(12); }); //this is the data of the golf courses var locations = []; locations.push({ name: "Pelican Hill Golf Club", address: "22800 S Pelican Hill Rd, Newport Beach, CA 92657", url: "golfpelicanhill.com", phone: "(866) 921-3139", latlng: new google.maps.LatLng(33.587368, -117.843351) }); locations.push({ name: "Costa Mesa CC", address: "1701 Golf Course Dr, Costa Mesa, CA 92626", url: "costamesacountryclub.com", phone: "(714) 540-7500", latlng: new google.maps.LatLng(33.668630, -117.926816) }); locations.push({ name: "Coto de Caza Golf & Racquet Club", address: "25291 Vista Del Verde, Coto De Caza, CA 92679", url: "coto-de-caza.com", phone: "(949) 858-4100", latlng: new google.maps.LatLng(33.593684, -117.582163) }); locations.push({ name: "Escena", address: "1100 Clubhouse View Drive, Palm Springs, CA 92262", url: "escenagolf.com", phone: "(760) 778-2737", latlng: new google.maps.LatLng(33.837302, -116.496758) }); locations.push({ name: "The Reserve Club", address: "74001 Reserve Dr, Indian Wells, CA 92210", url: "thereserveclub.com", phone: "(760) 568-5599", latlng: new google.maps.LatLng(33.689647, -116.364011) }); locations.push({ name: "Iron Wood Country Club", address: "73735 Irontree Dr, Palm Desert, CA 92260", url: "ironwoodcountryclub.com", phone: "(760) 346-0551", latlng: new google.maps.LatLng(33.688658, -116.377234) }); locations.push({ name: "BIGHORN", address: "255 Palowet Dr, Palm Desert, CA 92260", url: "bighorngolf.com", phone: "(760) 341-4653", latlng: new google.maps.LatLng(33.681487, -116.397590) }); locations.push({ name: "Indian Wells", address: "46000 Club Dr, Indian Wells, CA 92210", url: "indianwellsclub.com", phone: "(760) 345-2561", latlng: new google.maps.LatLng(33.716594, -116.329313) }); locations.push({ name: "Catalina Island Golf Course", address: "1 Country Club Dr, Avalon, CA 90704", url: "visitcatalinaisland.com", phone: "(310) 510-0530", latlng: new google.maps.LatLng(33.336750, -118.331057) }); locations.push({ name: "Lake Tahoe Golf Course", address: "3021 US-50, South Lake Tahoe, CA 96150", url: "tahoeparadisegc.com", phone: "(530) 577-2121", latlng: new google.maps.LatLng(38.830537, -120.031264) }); locations.push({ name: "Black Bear Golf Club", address: "24505 Calusa Blvd, Eustis, FL 32736", url: "blackbeargolfclub.com", phone: "(352) 357-4732", latlng: new google.maps.LatLng(39.506252, -107.722317) }); locations.push({ name: "ASU Karsten Golf Course", address: "1125 E Rio Salado Pkwy, Tempe, AZ 85281", url: "asukarsten.com", phone: "(480) 921-8070", latlng: new google.maps.LatLng(33.374342, -111.868505) }); locations.push({ name: "The Wynn Golf Club", address: "3131 S Las Vegas Blvd, Las Vegas, NV 89109", url: "wynnlasvegas.com", phone: "(702) 770-3575", latlng: new google.maps.LatLng(36.128339, -115.164919) }); locations.push({ name: "Hidden Lakes Golf Course", address: "35 Fairgreen Ave, New Smyrna Beach, FL 32168", url: "hiddenlakesgolfclub.com", phone: "(386) 427-4138", latlng: new google.maps.LatLng(37.528020, -96.718455) }); locations.push({ name: "Glen Dornoch Waterway Golf", address: "4840 Glen Dornoch Way, Little River, SC 29566", url: "glensgolfgroup.com", phone: "(843) 249-2541", latlng: new google.maps.LatLng(33.807309, -79.044356) }); locations.push({ name: "Causeway Club", address: "10 Fernald Point Rd, Southwest Harbor, ME 04679", url: "thecausewayclub.org", phone: "(207) 244-3780", latlng: new google.maps.LatLng(44.292062, -68.331503) }); locations.push({ name: "Lions Municipal Golf Course", address: "2901 Enfield Rd, Austin, TX 78703", url: "austintexas.gov", phone: "(512) 477-6963", latlng: new google.maps.LatLng(30.290959, -97.777061) }); locations.push({ name: "Blue Ash Golf Course", address: "4040 Cooper Rd, Cincinnati, OH 45241", url: "blueash.com", phone: "(513) 686-1280", latlng: new google.maps.LatLng(39.247544, -84.393563) }); locations.push({ name: "SilverRock Resort", address: "79-179 Ahmanson Ln, La Quinta, CA 92253", url: "silverrock.org", phone: "(760) 777-8884", latlng: new google.maps.LatLng(33.667301, -116.280366) }); locations.push({ name: "Santa Ana CC", address: "20382 Newport Blvd, Santa Ana, CA 92707", url: "santaanacc.org", phone: "(714) 556-3000", latlng: new google.maps.LatLng(33.665493, -117.887574) }); locations.push({ name: "Newport beach Golf Course", address: "3100 Irvine Ave, Newport Beach, CA 92660", url: "newportbeachgolfcoursellc.com", phone: "(949) 852-8681", latlng: new google.maps.LatLng(33.660791, -117.878921) }); locations.push({ name: "Desert Willow", address: "38-995 Desert Willow Dr, Palm Desert, CA 92260", url: "desertwillow.com", phone: "(760) 346-0015", latlng: new google.maps.LatLng(33.765671, -116.366058) }); //this is to make the markes and input the data into the markers for (var i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: locations[i].latlng, map: map, title: locations[i].name }); var location = locations[i]; var infoWindow = new google.maps.InfoWindow(); var content = '<strong class="lead" style="color:#000;">' + location.name + '</strong> - (<a target="_blank" href="' + location.url + '">url</a>)<hr style="margin:0;"><p style="margin-bottom:0;">' + location.address + '<br>' + location.city + ', ' + location.state + ' ' + location.zip + '<br>' + location.phone + '</p>'; google.maps.event.addListener(marker, 'click', (function(marker, content) { return function() { infoWindow.setContent(content); infoWindow.open(map, marker); } })(marker, content)); } } 

 #map { margin-top: 50px; width: 65%; height: 50%; } input { padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; width: 300px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; } #target { width: 345px; } body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } .intro-section { height: 100%; width: 100%; padding-top: 25px; text-align: center; } .container { opacity: 0.8; background-color: rgba(0, 0, 0, 0.9); background-attachment: fixed; background-size: cover, contain; background-position: center center; background-repeat: no-repeat; background-image: url("http://bunkerhillgolf.com/wp-content/uploads/2013/12/Bunker-Hill-Green.jpg"); } 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>golf page</title> <link href="css/default.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="css/scrolling-nav.css" rel="stylesheet"> </head> <body> <body id="page-top"> <div class="container intro-section"> <div id="aboutgolf"> </div> <div class="col-md-4 col-md-offset-4"> <input id="pac-input" class="controls" type="text" placeholder="Zip or State"> </div> <div class="col-md-4 col-md-offset-2" id="map"> </div> <div class="col-md-4 col-md-offset-3" id="myinfo"> </div> </div> </div> </div> </div> </section> <script src="js/intro-elements.js" type="text/javascript"></script> <script src="js/elements.js" type="text/javascript"></script> <script <script src="js/main.js" type="text/javascript"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASFbqtYQwVGZsZKvGVTYkE0i5Xk5mDN0E&libraries=places&callback=initAutocomplete" async defer></script> </body> </body> </html> 

Answer 1

https://developers.google.com/maps/documentation/javascript/infowindows指出：“一個InfoWindow可以附加到Marker對象（在這種情況下，其位置取決於標記的位置），也可以附加在地圖本身上指定的LatLng。”

如果要在地圖下顯示一個框，只需使用關閉按鈕向dom中添加元素並在其中顯示信息就足夠了。

Answer 2

要將當前顯示在div的InfoWindow中的內容替換為id =“ myinfo”，請更改標記單擊偵聽器以執行以下操作：

google.maps.event.addListener(marker, 'click', (function(marker, content) {
  return function() {
    document.getElementById('myinfo').innerHTML = content;
  }
})(marker, content));

代碼段：

 //this code writes the map function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 39.790117, lng: -96.584307 }, zoom: 4, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); //this code is for the search box var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input, null); google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); for (i = 0; place = places[i]; i++) { console.log('testing'); bounds.extend(place.geometry.location); } map.fitBounds(bounds); map.setZoom(12); }); //this is the data of the golf courses var locations = []; locations.push({ name: "Pelican Hill Golf Club", address: "22800 S Pelican Hill Rd, Newport Beach, CA 92657", url: "golfpelicanhill.com", phone: "(866) 921-3139", latlng: new google.maps.LatLng(33.587368, -117.843351) }); locations.push({ name: "Costa Mesa CC", address: "1701 Golf Course Dr, Costa Mesa, CA 92626", url: "costamesacountryclub.com", phone: "(714) 540-7500", latlng: new google.maps.LatLng(33.668630, -117.926816) }); locations.push({ name: "Coto de Caza Golf & Racquet Club", address: "25291 Vista Del Verde, Coto De Caza, CA 92679", url: "coto-de-caza.com", phone: "(949) 858-4100", latlng: new google.maps.LatLng(33.593684, -117.582163) }); locations.push({ name: "Escena", address: "1100 Clubhouse View Drive, Palm Springs, CA 92262", url: "escenagolf.com", phone: "(760) 778-2737", latlng: new google.maps.LatLng(33.837302, -116.496758) }); locations.push({ name: "The Reserve Club", address: "74001 Reserve Dr, Indian Wells, CA 92210", url: "thereserveclub.com", phone: "(760) 568-5599", latlng: new google.maps.LatLng(33.689647, -116.364011) }); locations.push({ name: "Iron Wood Country Club", address: "73735 Irontree Dr, Palm Desert, CA 92260", url: "ironwoodcountryclub.com", phone: "(760) 346-0551", latlng: new google.maps.LatLng(33.688658, -116.377234) }); locations.push({ name: "BIGHORN", address: "255 Palowet Dr, Palm Desert, CA 92260", url: "bighorngolf.com", phone: "(760) 341-4653", latlng: new google.maps.LatLng(33.681487, -116.397590) }); locations.push({ name: "Indian Wells", address: "46000 Club Dr, Indian Wells, CA 92210", url: "indianwellsclub.com", phone: "(760) 345-2561", latlng: new google.maps.LatLng(33.716594, -116.329313) }); locations.push({ name: "Catalina Island Golf Course", address: "1 Country Club Dr, Avalon, CA 90704", url: "visitcatalinaisland.com", phone: "(310) 510-0530", latlng: new google.maps.LatLng(33.336750, -118.331057) }); locations.push({ name: "Lake Tahoe Golf Course", address: "3021 US-50, South Lake Tahoe, CA 96150", url: "tahoeparadisegc.com", phone: "(530) 577-2121", latlng: new google.maps.LatLng(38.830537, -120.031264) }); locations.push({ name: "Black Bear Golf Club", address: "24505 Calusa Blvd, Eustis, FL 32736", url: "blackbeargolfclub.com", phone: "(352) 357-4732", latlng: new google.maps.LatLng(39.506252, -107.722317) }); locations.push({ name: "ASU Karsten Golf Course", address: "1125 E Rio Salado Pkwy, Tempe, AZ 85281", url: "asukarsten.com", phone: "(480) 921-8070", latlng: new google.maps.LatLng(33.374342, -111.868505) }); locations.push({ name: "The Wynn Golf Club", address: "3131 S Las Vegas Blvd, Las Vegas, NV 89109", url: "wynnlasvegas.com", phone: "(702) 770-3575", latlng: new google.maps.LatLng(36.128339, -115.164919) }); locations.push({ name: "Hidden Lakes Golf Course", address: "35 Fairgreen Ave, New Smyrna Beach, FL 32168", url: "hiddenlakesgolfclub.com", phone: "(386) 427-4138", latlng: new google.maps.LatLng(37.528020, -96.718455) }); locations.push({ name: "Glen Dornoch Waterway Golf", address: "4840 Glen Dornoch Way, Little River, SC 29566", url: "glensgolfgroup.com", phone: "(843) 249-2541", latlng: new google.maps.LatLng(33.807309, -79.044356) }); locations.push({ name: "Causeway Club", address: "10 Fernald Point Rd, Southwest Harbor, ME 04679", url: "thecausewayclub.org", phone: "(207) 244-3780", latlng: new google.maps.LatLng(44.292062, -68.331503) }); locations.push({ name: "Lions Municipal Golf Course", address: "2901 Enfield Rd, Austin, TX 78703", url: "austintexas.gov", phone: "(512) 477-6963", latlng: new google.maps.LatLng(30.290959, -97.777061) }); locations.push({ name: "Blue Ash Golf Course", address: "4040 Cooper Rd, Cincinnati, OH 45241", url: "blueash.com", phone: "(513) 686-1280", latlng: new google.maps.LatLng(39.247544, -84.393563) }); locations.push({ name: "SilverRock Resort", address: "79-179 Ahmanson Ln, La Quinta, CA 92253", url: "silverrock.org", phone: "(760) 777-8884", latlng: new google.maps.LatLng(33.667301, -116.280366) }); locations.push({ name: "Santa Ana CC", address: "20382 Newport Blvd, Santa Ana, CA 92707", url: "santaanacc.org", phone: "(714) 556-3000", latlng: new google.maps.LatLng(33.665493, -117.887574) }); locations.push({ name: "Newport beach Golf Course", address: "3100 Irvine Ave, Newport Beach, CA 92660", url: "newportbeachgolfcoursellc.com", phone: "(949) 852-8681", latlng: new google.maps.LatLng(33.660791, -117.878921) }); locations.push({ name: "Desert Willow", address: "38-995 Desert Willow Dr, Palm Desert, CA 92260", url: "desertwillow.com", phone: "(760) 346-0015", latlng: new google.maps.LatLng(33.765671, -116.366058) }); //this is to make the markes and input the data into the markers for (var i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: locations[i].latlng, map: map, title: locations[i].name }); var location = locations[i]; var infoWindow = new google.maps.InfoWindow(); var content = '<strong class="lead" style="color:#000;">' + location.name + '</strong> - (<a target="_blank" href="' + location.url + '">url</a>)<hr style="margin:0;"><p style="margin-bottom:0;">' + location.address + '<br>' + location.city + ', ' + location.state + ' ' + location.zip + '<br>' + location.phone + '</p>'; google.maps.event.addListener(marker, 'click', (function(marker, content) { return function() { document.getElementById('myinfo').innerHTML = content; } })(marker, content)); } } 

 #map { margin-top: 50px; width: 65%; height: 50%; } input { padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; width: 300px; } #pac-input:focus { border-color: #4d90fe; } .pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; } #target { width: 345px; } body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } .intro-section { height: 100%; width: 100%; padding-top: 25px; text-align: center; } .container { opacity: 0.8; background-color: rgba(0, 0, 0, 0.9); background-attachment: fixed; background-size: cover, contain; background-position: center center; background-repeat: no-repeat; background-image: url("http://bunkerhillgolf.com/wp-content/uploads/2013/12/Bunker-Hill-Green.jpg"); } #myinfo { background-color: #fff; width: 65%; } 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>golf page</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> </head> <body id="page-top"> <div class="container intro-section"> <div id="aboutgolf"> </div> <div class="col-md-4 col-md-offset-4"> <input id="pac-input" class="controls" type="text" placeholder="Zip or State" /> </div> <div class="col-md-4 col-md-offset-2" id="map"> </div> <div class="col-md-4 col-md-offset-3" id="myinfo"> </div> </div> <script <script src="js/main.js" type="text/javascript"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASFbqtYQwVGZsZKvGVTYkE0i5Xk5mDN0E&libraries=places&callback=initAutocomplete" async defer></script> </body> </html>