添加谷歌地图InfoWindow动态Wordpress

Question

我正在尝试添加一个谷歌地图InfoWindow动态到Wordpress，这是代码，目前正在与一个自定义标记工作，我已经尝试了InfoWindow的几个功能，但它似乎是打破，而不是加载地图。不知道我做错了什么。

这个工作，我只需要添加一个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

一个简单的信息窗口将是(未测试):

          //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);
});

关于信息窗口的更多信息，你可以在这里阅读