Javascript 在谷歌地图的点击标记上添加信息窗口_Javascript_Php_Mysql_Google Maps

Javascript 在谷歌地图的点击标记上添加信息窗口

javascript php mysql google-maps

Javascript 在谷歌地图的点击标记上添加信息窗口,javascript,php,mysql,google-maps,Javascript,Php,Mysql,Google Maps,我使用PHP和MYSQL从数据库中检索数据，并在GoogleMapAPI上显示标记，添加一个信息窗口，其中包含使用ClickListener从数据库检索的信息。在我添加信息窗口后，它似乎不起作用我的错误在哪里代码：自定义标记 /*始终明确设置贴图高度以定义div的大小 *包含映射的元素*/ #地图{ 高度：600px； } /*可选：使示例页面填充窗口*/ html，正文{ 身高：100%；保证金：0；填充：0； } 标题子信息 var映射；函数initMap（）{ map=n

我使用PHP和MYSQL从数据库中检索数据，并在GoogleMapAPI上显示标记，添加一个信息窗口，其中包含使用ClickListener从数据库检索的信息。在我添加信息窗口后，它似乎不起作用

我的错误在哪里

代码：


自定义标记
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
高度：600px；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
标题
子信息
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：新google.maps.LatLng（33.888630,35.495480），
mapTypeId:“路线图”
});
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
变量图标={
停车场：{
图标：iconBase+“parking\u lot\u maps.png”
},
图书馆：{
图标：iconBase+“library_maps.png”
},
信息：{
图标：iconBase+“info-i_maps.png”
}
};
var$popup=$（“#popupstring1”）
功能添加标记（功能）{
var marker=new google.maps.marker({
位置：feature.position，
//图标：图标[feature.type]。图标，
数据popuString id:$popup，
地图：地图
});
}
变量特征=[
{
位置：新google.maps.LatLng（，），
类型：“”
}
];
var infowindow=new google.maps.infowindow（）；
for（变量i=0，特征；特征=特征[i]；i++）{
添加标记（特征）；
}
}

我通过添加以下代码解决了问题：

代码：

我不知道如何在代码中输入你的答案我是谷歌地图新手APIu将html放在

下面我尝试了你的答案，但没有效果我将编辑代码并显示编辑后的代码。我在这张图片上的黑暗中显示我。对不起，可能是重复的

<?php
        /*
        Template Name: MAP2
        */

        get_header();
  ?>


<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCquey2tCZ32jLJJDEEi2D7_RnXXyj9RTI&callback=initMap">
    </script>
     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 600px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

  </head>
  <body>
    <div id="map">
      <div class="map-popupstring hidden" id="popupstring1">
                <div class="text-center">
                    <h3>title</h3>
                     <p>subinfo</p>
                </div>
            </div>

    </div>

    <script>

     var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: new google.maps.LatLng(33.888630, 35.495480),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };


        var $popup = $("#popupstring1")

        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            //icon: icons[feature.type].icon,
            data-popupstring-id: $popup,
            map: map
          });
        }



        var features = [
        <?php
          global $wpdb;
            $prependStr ="";
            foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
               $latitude = $row->latitude;
               $longitude = $row->longitude;
               $info = $row->siteID;
           echo $prependStr;
       ?>
{
    position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
    type: '<?php echo $info; ?>'
}
<?php
$prependStr =",";
}
?>
        ];

    var infowindow = new google.maps.InfoWindow();

        for (var i = 0, feature; feature = features[i]; i++) {

          addMarker(feature);
        }
}



         </script>


  </body>
</html>

<?php
get_footer();
?>

           <div class="map-popupstring hidden" id="popupstring1">
                <div class="text-center">
                    <h3>title</h3>
                     <p>subinfo</p>
                </div>
            </div>

var $popup = $("#popupstring1")

function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        data-popupstring-id: $popup,
        map: map
      });
    }

 var popup = new google.maps.InfoWindow({
                    content: feature,
                    maxWidth: 300
                });

          google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    map.panTo(center);
                    currentPopup = null;
                });