是否有任何选项可以在页面加载时自动显示 infoWindow答案

【问题标题】：is there any options to display infoWindow automatically on page load是否有任何选项可以在页面加载时自动显示 infoWindow
【发布时间】：2013-09-03 14:07:16
【问题描述】：

我正在使用GMaps 在我的网站上显示地图。使用 infoWindow 创建地图非常容易。但是，信息窗口仅在单击标记时出现。

我的 Javascript：

var map;
$(document).ready(function(){
   map = new GMaps({
        div: '#map',
        lat: 11.5671732,
        lng: 104.92592450000006,
        zoom: 15
   });
   map.addMarker ({
       lat: 11.5671732,
       lng: 104.92592450000006,
       infoWindow: {
          content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
       },
   });
});

在 stackoverflowing 之后，我只看到人们使用 Google 地图 API 进行硬编码来实现这一点。所以我想知道是否有任何选项可以在页面加载时自动显示 infoWindow 而无需点击标记？

Here's the link to my map page.

非常感谢任何帮助。

【问题讨论】：

我认为没有办法这样做。如果你查看插件的源代码，没有什么可以做到的。
不，@geocodezip 的回答实际上解决了我的问题
是的，但根据您的问题，这不是您想要的。

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

触发对标记的点击应该可以工作：

google.maps.event.trigger(map.markers[0], 'click');

proof of concept fiddle

代码 sn-p：

var map;
$(document).ready(function() {
  map = new GMaps({
    div: '#map',
    lat: 11.5671732,
    lng: 104.92592450000006,
    zoom: 15
  });
  map.addMarker({
    lat: 11.5671732,
    lng: 104.92592450000006,
    infoWindow: {
      content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
    },
  });
  google.maps.event.trigger(map.markers[0], 'click');
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div id="map"></div>

【讨论】：

【解决方案2】：

infowindow.open(地图,标记);

应该可以解决问题。

它会通过一个例子更好地连接，基本上我们将简单地制作 infowindow.open(); “初始化”函数本身的一部分，并在地图加载时调用“初始化”函数。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initialize() {
        var myLatlng = new google.maps.LatLng(28.4387675, 77.5243212); //replace with lan and lat
        var mapOptions = {
            zoom: 12,
            center: myLatlng
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<div id="bodyContent">'+
                    '<p>Add information for info window here</p>'+
                    '</div>'+
                    '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Contact Us'
        });
        infowindow.open(map,marker);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

现在将此代码放在以下部分：

<div id="map-canvas" style="height:425px; "> </div>

【讨论】：

谢谢凯特，希望添加的例子能更好地解释它。