Infowindow on 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); 
      }); 
     } 

：しかし、私は1つが他の表示された場合...ここ

はマーカーのためのコードではありません、同じウィンドウ内の情報やボタンを持ってする方法を見つけることができないよう

助けていただければ幸いです

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>

を