动态添加谷歌地图信息窗口 Wordpress答案

【问题标题】：Adding Google maps InfoWindow Dynamically Wordpress动态添加谷歌地图信息窗口 Wordpress
【发布时间】：2013-03-01 19:21:08
【问题描述】：

我正在尝试将 Google 地图 InfoWindow 动态添加到 Wordpress，这是当前正在使用自定义标记的代码我已经为 infowindows 尝试了几个功能，但它似乎正在破坏并且没有加载地图。不知道我可能做错了什么。

这行得通，我只需要添加一个 infoWindow

<script type="text/javascript">
              //<![CDATA[

              function load() {
                 var styles = 
                 [
                    {
                      "stylers": [
                        { "lightness": 1 },
                        { "saturation": -76 },
                        { "hue": "#3bff00" }
                      ]
                    }
                  ];


              var lat = <?php echo $lat; ?>;
              var lng = <?php echo $lng; ?>;
              // coordinates to latLng
              var latlng = new google.maps.LatLng(lat, lng);
              // map Options

              var myOptions = {

              zoom: 14,
              scrollwheel: false,
              center: latlng,
              mapTypeId: 'Styled'
              };

              //draw a map
              var map = new google.maps.Map(document.getElementById("map"), myOptions);
              var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
              map.mapTypes.set('Styled', styledMapType);
              var marker = new google.maps.Marker({
              position: map.getCenter(),
              map: map,
              icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
              });
              }
              // call the function
              load();
              //]]>

            </script>

【问题讨论】：

我在您的代码中没有看到任何信息窗口。请添加一些信息，说明您尝试了哪些方法无效，以及信息窗口中将显示的数据来自何处。

标签： wordpress google-maps dynamic infowindow

【解决方案1】：

一个简单的infowindow 将是（未测试）：

          //draw a map
          var map = new google.maps.Map(document.getElementById("map"), myOptions);
          var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
          map.mapTypes.set('Styled', styledMapType);
          var marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
            icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
          });
          var infowindow = new google.maps.InfoWindow();
          google.maps.event.addListener(marker, "click", function(e) {
             infowindow.setContent("Hello world");
             infowindow.open(map,marker);
          });
          google.maps.event.trigger(marker, "click");
          }
          // call the function

【讨论】：

也许你可以回答我上面关于你尝试了什么的问题（除了上面的）。你有任何 javascript 错误吗？如果单击它，信息窗口是否工作？注意到一个错字，我修正了，但应该给你一个错误。

【解决方案2】：

只需添加以下代码：

var contentString = 'put your content here.';
google.maps.event.addListener(marker, 'click', function() {
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        position: latlng,
        maxWidth: 200
        });
    infowindow.open(map);
});

有关信息窗口的更多信息，您可以阅读HERE。

【讨论】：