在打开新的InfoWindow时关闭每个InfoWindow

时间:2012-10-16 03:05:17

标签: maps infowindow

经过大量研究后,我无法确定为何在打开新窗口时无法关闭InfoWindow。到目前为止,我尝试过的所有内容都导致InfoWindow根本无法显示。

我在这里尝试了一些建议:Google Map API v3 ~ Simply Close an infowindow?和其他地方,但我想知道这是否是一个我不知道导致这个问题的问题。不可否认,这是从其他来源拼凑而成的。非常感谢你的帮助。

    <html>
  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <link href="https://code.googleapis.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script> 
    var geocoder;
  var map;
  var infoWindow;


  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(37.77014301036805, -79.48862973916635);
    var mapOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  }

  function codeAddress() {

    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var loc=[]; // no need to define it in outer function now
        loc[0]=results[0].geometry.location.lat();
        loc[1]=results[0].geometry.location.lng();
                var content = '<div id="infoWindow"><iframe src="http://inside.handp.com/map2.php?';
        content += 'latitude=' + results[0].geometry.location.lat()+ '&';
        content += 'longitude=' + results[0].geometry.location.lng()+'" frameborder="0" allowfullscreen scrolling="no"></iframe></div>';


 //      display( loc[0] ); 
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location


        });

        addInfoWindow(marker, content);

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

    function display( long_lat ){
     alert(long_lat);
  }
  function addInfoWindow(marker, message) {
            var info = message;

            var infoWindow = new google.maps.InfoWindow({content: message});

            google.maps.event.addListener(marker, 'click', function () {

            });

                infoWindow.open(map, marker);

        }

    </script>
    </head>
<body onload="initialize()">
 <div id="map_canvas" style="width: 640px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Enter Address">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

您只能使用一个infowindow对象并动态设置不同的内容

例如:     var infowindow = new google.maps.InfoWindow({maxWidth:200});

为您的标记添加监听器

var marker = new google.maps.Marker({
   map: map,
   info: 'this is info window html',
   position: results[0].geometry.location
});

google.maps.event.addListener(marker, 'click', function() {             
     infowindow.setContent(this.info);
     infowindow.open(map, this);
     map.setCenter(this.getPosition());
});