带有谷歌地图API的wordpress不起作用

时间:2017-03-03 07:39:01

标签: php mysql wordpress google-maps

我在WordPress上使用PHP和MYSQL与Google Map API,我从MYSQL数据库中检索数据,并根据从数据库中检索到的坐标在Google Map上显示标记。

问题是网页上是否显示了注释,有人能告诉我代码中的错误在哪里?

的代码:

<?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();
?>

1 个答案:

答案 0 :(得分:0)

我认为设置高度的问题。见Here

但在我的情况下,将特定像素设置为映射div。像这样#map {min-height: 600px;}