【问题标题】：how to add info window and markers on Google Map如何在谷歌地图上添加信息窗口和标记
【发布时间】：2017-07-31 19:15:28
【问题描述】：

在 WordPress 和 Google Map API 上使用 PHP 和 MYSQL，以便从 MYSQL 数据库中检索数据并在 Google Map 上显示带有信息窗口的标记。

问题是我无法在 infoWindow 中显示从数据库中检索到的数据作为 siteID 其中它是所选表中的一个字段。

使用下面的代码标记不会显示在地图上

代码：

 <?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>

    <script>

     var map,currentPopup;
      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'
          }
        };




        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,

            //icon: icons[feature.type].icon,
            map: map
          });

          var popup = new google.maps.InfoWindow({
                   // content: feature.position.toString(),
// this line that makes the error 
               content: feature.info,
                    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;
                });
        }



        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; ?>),
    info:(<?php echo $info;?>),

}
<?php
$prependStr =",";
}
?>
        ];



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

          addMarker(feature);
        }
}



         </script>


  </body>
</html>

<?php
get_footer();
?>

【问题讨论】：

用单引号替换圆括号对 info 参数。谢谢。
您是否从查询中获取坐标（纬度、经度）？
@user1544541 是的，您的回答有效，谢谢
太棒了！！！请接受我的回答。谢谢。

标签： php mysql google-maps marker infowindow

【解决方案1】：

将圆括号替换为 info 参数的单引号。谢谢。

【讨论】：

如何使这些图标出现而不是常规标记？我有图标，但也没有显示为所需的图标
请详细说明。谢谢。
我想要图标而不是常规标记如何在代码中做到这一点？ javascript还是php？
在info参数后面加上icon参数即可。明白了吗？
并将图标参数值设置为具有绝对路径的自定义图标。