Infowindow在Google地图上按钮
所以我有这张地图，它显示了我的位置和附近的餐馆，我想要按一家餐馆，并且infowindow会显示有关该餐厅的信息以及一个搜索该餐厅附近的酒吧的按钮，但我似乎无法找到将信息和按钮放在同一个窗口中，如果出现另一个则不会...
这是标记的代码：
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);
});
}
任何帮助，将不胜感激
如果您想在InfoWindow使用place.name和按钮，则需要将它们组合到click监听器函数中：
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);
});
概念验证小提琴
代码片段：
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>