Infowindow on Google Maps with button

So I have this map that it's showing my location and the restaurants nearby and I wanted to press a restaurant and have an infowindow appear with information about the restaurant and a button to search for bars nearby that restaurant but I can't seem to find how to have the info and the button in the same window, if one appears the other doesn't...

Here is the code for the marker:

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

Any help would be appreciated

---

If you want the place.name and the button in the InfoWindow , you need to combine them in the click listener function:

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

code snippet:

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>

链接地址: http://www.djcxy.com/p/35864.html

上一篇: 月相API

下一篇: Infowindow在Google地图上按钮