如何通过按钮打开infowindow

时间:2013-10-25 00:55:38

标签: google-maps button infowindow

我正试图通过位于另一个信息窗口的按钮打开一个信息窗口。

我制作了按钮,但我需要帮助创建触发器或事件来执行此操作。

按钮:

  <input name="enviar" type="submit" id="form1" value="Reservar"/>

通过单击标记打开infowindow的代码,我需要通过单击按钮打开它。请帮忙。

var form = new google.maps.Marker({
  map: map,
  position: myLatLng,
  draggable: true,
  icon: icon
}); 

google.maps.event.addListener(form, 'click', showform);
infoWindow = new google.maps.InfoWindow();

function showform(event) {
  var contentString =  '<div style="width:160px;height:140px;"> <b>LOTE 1</b> <img  src="img/terreno1.png" width="113" height="72" /> <br>450m²<br> <p style="color:#F00;"> Indisponível </p></div>';

  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);  
}

1 个答案:

答案 0 :(得分:0)

我在JSFiddle上放了一个demo with solution

这是HTML部分

<div id="map-canvas" style="width:100%;height:800px;"></div>

的JavaScript

var infoWindow;
$(document).ready(function(){
  var default_center = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = { zoom: 8, center: default_center, mapTypeId: google.maps.MapTypeId.ROADMAP };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  infoWindow = new google.maps.InfoWindow();

  var marker1 = new google.maps.Marker({ position: default_center, map: map });
  marker1.content = '<input name="enviar" type="submit" id="form1" value="Reservar"/>';
  google.maps.event.addListener(marker1, 'click', function() {
    showform(marker1, function(){
      $("#form1").click(function(){
        showform(marker2);
      });
    });
  });

  var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(-34.297, 150.144), map: map });
  marker2.content = '<div style="width:160px;height:140px;"> <b>LOTE 1</b> <img  src="img/terreno1.png" width="113" height="72" /> <br>450m²<br> <p style="color:#F00;"> Indisponível </p></div>';
  google.maps.event.addListener(marker2, 'click', function() {
    showform(marker2);
  });
});

function showform(marker, handler) {
  if(infoWindow) infoWindow.close();
  infoWindow.setContent(marker.content);
  infoWindow.setPosition(marker.getPosition());
  infoWindow.open(map);
  if(handler){
    google.maps.event.addListener(infoWindow, 'domready', handler);
  }
}