有没有办法将地图下的google API地图上的infoWindow信息放在标记上？

时间：2016-01-17 17:57:42

标签： javascript google-maps-api-3 google-api

好好尝试将信息放在地图下，它会在标记infoWindows上显示信息，我试图将信息放在地图下。 我想把它放在一个盒子或者盒子上。 所有这些代码都运行良好，但我思考太多，我不知道从哪里开始。

＆＃13;
＆＃13; 
//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));
  }
}
＆＃13; 
#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");
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

https://developers.google.com/maps/documentation/javascript/infowindows表示：“InfoWindow可以附加到Marker对象（在这种情况下，它的位置基于标记的位置），也可以附加在指定LatLng的地图本身上。”

如果您希望在地图下方显示一个框，则可以通过关闭按钮将元素添加到dom并在那里显示信息。

答案 1 :(得分：0)

要将当前出现在InfoWindow中的内容放在id =“myinfo”的div中，请更改标记点击侦听器以执行此操作：

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>

相关问题
最新问题