Question

我正在尝试将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>

Answer 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

Answer 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。

添加谷歌地图InfoWindow动态Wordpress

2 个答案: