使用按钮

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>