使用按钮在Google地图上显示信息窗口

Question

所以我有这张地图，它显示了我的位置和附近的餐馆，我想按一个餐馆，并有一个信息窗口显示有关餐厅的信息和一个按钮搜索附近的餐厅酒吧，但我似乎无法找到将信息和按钮放在同一个窗口中，如果出现另一个则不...

以下是标记的代码：

function createMarker(place) {
            var infowindow = new google.maps.InfoWindow();
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });
            markers.push(marker);


            var infowindow = new google.maps.InfoWindow({
                content: "<div><input type='submit' id='butSubmit' value='Procurar' onclick='BarFind()'></div>"
            });


            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }

任何帮助，将不胜感激

Answer 1

如果你想要place.name和InfoWindow中的按钮，你需要在点击监听器功能中组合它们：

google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent("<div>"+place.name+"<br><input type='submit' id='butSubmit' value='Procurar' onclick='BarFind()'></div>");
  infowindow.open(map, this);
});

proof of concept fiddle

代码段：

var geocoder;
var map;
var markers = [];
var infowindow;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infowindow = new google.maps.InfoWindow();
  var place = {
    geometry: {
      location: map.getCenter()
    },
    name: "Fred"
  };
  createMarker(place);
  var place2 = {
    geometry: {
      location: {
        lat: 37.4529598,
        lng: -122.1817252
      }
    },
    name: "Frank"
  };
  createMarker(place2);
}
google.maps.event.addDomListener(window, "load", initialize);

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  markers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("<div>" + place.name + "<br><input type='submit' id='butSubmit' value='Procurar' onclick='BarFind()'><div id='bar'></div></div>");
    infowindow.open(map, this);
  });
}

function BarFind() {
  document.getElementById('bar').innerHTML = "called BarFind()";
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>