マーカが地図に表示されていません

私はこのコードを使ってデータベースからlatとlngを取得し、マーカ付きのGoogleマップに表示しますが、マーカは表示されません。マーカが地図に表示されていません

<!doctype html> 
<html> 
<head> 
    <meta charset='utf-8'/> 
    <title>Google Maps</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src='https://maps.google.com/maps/api/js?key=AIzaSyAKcut1aeRFdjPTS5QPefgbrnQIAVkGuis' type='text/javascript'></script> 
    <script type='text/javascript'> 
     (function(){ 

      var map,marker,latlng,bounds,infowin; 
      /* initial locations for map */ 
      var _lat=14.676; 
      var _lng=121.0437; 



      function showMap(){ 
       /* set the default initial location */ 
       latlng={ lat: _lat, lng: _lng }; 

       bounds = new google.maps.LatLngBounds(); 
       infowin = new google.maps.InfoWindow(); 

       /* invoke the map */ 
       map = new google.maps.Map(document.getElementById('map'), { 
        center:latlng, 
        zoom: 10 
       }); 

       /* show the initial marker */ 
       marker = new google.maps.Marker({ 
        position:latlng, 
        map: map, 
        title: 'Hello World!' 
       }); 
       bounds.extend(marker.position); 


       /* I think you can use the jQuery like this within the showMap function? */ 
       $.ajax({ 
        url: get.php, 
        data: {'ajax':true }, 
        dataType: 'json', 
        success: function(data, status){ 
         $.each(data, function(i,item){ 
          /* add a marker for each location in response data */ 
          addMarker(item.lat, item.lng, item.name); 
         }); 
        }, 
        error: function(){ 
         output.text('There was an error loading the data.'); 
        } 
       });     
      } 

      /* simple function just to add a new marker */ 
      function addMarker(lat,lng,title){ 
       marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */ 
        position:{ lat:parseFloat(lat), lng:parseFloat(lng) }, 
        map:map, 
        title:title 
       }); 

       google.maps.event.addListener(marker, 'click', function(event){ 
        infowin.setContent(this.title); 
        infowin.open(map,this); 
        infowin.setPosition(this.position); 
       }.bind(marker)); 

       bounds.extend(marker.position); 
       map.fitBounds(bounds); 
      } 


      document.addEventListener('DOMContentLoaded', showMap, false); 
     }()); 
    </script> 
    <style> 
     html, html body, #map{ height:100%; width:100%; padding:0; margin:0; } 
    </style> 
</head> 
<body> 
    <div id='map'></div> 
</body>

これが私のget.phpあるデータベースからデータを取得しています。

$mysql ="SELECT lat,lng FROM `coordinates`"; 
$result = mysqli_query($connect, $mysql); 
if (!empty($result)) 
{ 

while ($row=mysqli_fetch_array($result)) 
{ 
    $latlng[] = array(
    'lat' => $row['lat'], 
    'lng' => $row['lng'], 
    ); 

    } 
} 

    mysqli_close($connect); 

header('Content-Type:application/json'); 
    echo json_encode($latlng); 
?>

この1つは機能しており、データベースから緯度とLNGを得るが、マーカーは、まだGoogleマップに表示されていませんさ。誰かが私に理由を教えてくれますか？

出典

2016-09-01 Monds

「名前」をデータベースから選択していませんが、addMarker（）関数のパラメータとしてitem.nameが使用されています。その後、アレイに追加

"SELECT lat,lng,name FROM `coordinates`";

：

だからあなたのmysqlのクエリがに変更

$latlng[] = array(
'lat' => $row['lat'], 
'lng' => $row['lng'], 
'name' => $row['name'] 
);

私はあなたのjavascriptのコードを試してみましたが、それがマーカーを追加すると、AJAXせずに動作することになります。あなたの質問にJSON文字列を追加してください。

あなたはAJAXでマーカーを追加することで、まだ問題があるとすれば、あなたはJSON（ブラウザでちょうどオープンget.php）を送信する必要があり、あなたはデベロッパーコンソールですべてのエラーを持っているかどうかを確認 - Firefoxの（Ctrl + Shiftキー+ Kについて）。

出典

2016-09-01 20:56:37 Bulva

まだマップにマーカーを追加していません。問題は "url"のajaxにあると思いますか？パスは正しいですか？私の "get.php"はフリーのホスティングサイトにオンラインで保存/保存されています。 – Monds

また、Ajaxを使用せずにどのように動作しましたか？コードを見ることはできますか？ – Monds

@Mondsどこに問題があるのかを知る最も良い方法は、ブラウザのget.phpファイルを確認することです。 JSON文字列またはエラーが表示されます。あなたのアドレスホストからブラウザ上でget.phpを開き、それが何を書いているのかを送信してみてください。 – Bulva

マーカが地図に表示されていません

答えて

関連する問題