Php 带有谷歌地图API的wordpress没有'；行不通_Php_Mysql_Wordpress_Google Maps

Php 带有谷歌地图API的wordpress没有'；行不通

php mysql wordpress google-maps

Php 带有谷歌地图API的wordpress没有'；行不通,php,mysql,wordpress,google-maps,Php,Mysql,Wordpress,Google Maps,我在WordPress和Google Map API上使用PHP和MYSQL，从MYSQL数据库检索数据，并根据从数据库检索到的坐标在Google地图上显示标记问题是网页上显示的是noting，有人能告诉我代码中的错误在哪里吗代码：自定义标记 /*始终明确设置贴图高度以定义div的大小 *包含映射的元素*/ #地图{ 身高：100%； } /*可选：使示例页面填充窗口*/ html，正文{ 身高：100%；保证金：0；填充：0； } var映射；函数initMap（）{ map=n

我在WordPress和Google Map API上使用PHP和MYSQL，从MYSQL数据库检索数据，并根据从数据库检索到的坐标在Google地图上显示标记

问题是网页上显示的是noting，有人能告诉我代码中的错误在哪里吗

代码：


自定义标记
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心：新google.maps.LatLng（-33.91722151.23064），
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 marker=new google.maps.marker({
位置：feature.position，
图标：图标[feature.type]。图标，
地图：地图
});
}
变量特征=
{
{
位置：新google.maps.LatLng（，），
类型：“”
}
}

我认为问题在于设置高度。请参阅

但在我的例子中，将特定像素设置为map div。像这样

#map{min height:600px；}

我确实将高度更改为300px，但仍然没有显示任何内容我测试了代码，但可以显示贴图。您是否曾经在“auth key”之后使用过“&”？在“callback”之前添加“&”？这就是我所做的src=“***********&callback=initMap”>我认为您的“php”代码有一些错误。请尝试删除“php”代码并运行应用程序。

<?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">
     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* 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;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          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 features = 
          {
            <?php
            global $wpdb;
              $prependStr ="";
              foreach( $wpdb->get_results("SELECT * FROM site_coordinates2") as $key => $row) 
              {
                  $latitude = $row->latitude;
                  $longitude = $row->longitude;
                  $info = $row->siteID;
             echo $prependStr;
           ?>
    {

    position: new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $latitude ?>),
    type: '<?php echo $info;?>'
   }
   <?php
   $prependStr =",";
   }


  ?>
}
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=***************callback=initMap">
    </script>
  </body>
</html>

<?php
get_footer();
?>