2017-03-03 10 views
0

WordPressでPHPとMYSQLを使用しています.MySQLデータベースからデータを取得し、データベースから取得した座標に基づいてGoogleマップ上にマーカーを表示しています。GoogleマップAPIを使用したwordpressは動作しません

問題は、Webページに注目点が表示されているので、誰かが私のコードのどこにエラーがあるのか​​教えていただけますか?

コード:

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

答えて

0

私は高さを設定するから問題を考えます。 Here

を参照してください。しかし、私の場合、divをマップする特定のピクセルを設定します。このように#map {min-height: 600px;}

+0

私は300pxに変更しましたが、まだ何も表示されていません –

+0

私はあなたのコードをテストしましたが、地図を表示することは大丈夫です。 "auth key"の後ろで "&"を使ったことはありますか? – sayingu

+0

**&**を追加しましたが、まだ何も表示されていません –

関連する問題