2012-02-06 6 views
0

検索結果のページに最大20のリストを表示するGoogleマップがあります。 20のリスティングはmysqlクエリから引き出され、ページ上でループします。その部分は正常に動作しています。Google Maps(api v3) - mysqlクエリ結果をジオコードにループし、地図上に複数のマーカーを配置

しかし、Googleマップ(私の住所をジオコードする)は、最初のリストのみを表示します。私はそれぞれのリストをループさせて、それらをすべて地図上に置く方法を失っています。

私はそれが動作するようになるとすべてを理解して理解するのは簡単だろうと確信していますが、それを最初からやり直すことはありません。 Googleのデベロッパー向けドキュメントはあまり役に立っていません。

大変助かりました! *

** * ** ** * UPDATE ** ** に疑問を** *

I couldn提供答え問題が解決する前に、ページはすべてのリスティングを示していたが、マップされているのは問題1だった。答えを実装した後、ページには最初のリストのみが表示され、地図はまったく表示されません。

トリムダウンA & Bバージョンを作成しました。これは基本的にページ全体のコードの中にいっぱいペーストである:

VERSION 1:これは、ページ上のすべてのリストを示しているが、唯一の最初のリストをマップ:HERE

<?php 
mysql_select_db($database_db, $db); 
$query_my_query = "SELECT * FROM biz WHERE state = 'MO' and city = 'springfield' order by name asc limit 0,5 "; 
$my_query = mysql_query($query_my_query, $db) or die(mysql_error()); 
$row_my_query = mysql_fetch_assoc($my_query); 
$totalRows_my_query = mysql_num_rows($my_query); 

$address = $row_my_query['address']; 
$city = $row_my_query['city']; 
$state = $row_my_query['state']; 

?> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var geocoder; 
    var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(34.052234,-118.243685); 
    var address = '<?php echo $address.', '.$city.', '.$state; ?>'; 

    var myOptions = { 
     zoom: 14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 
</script> 
<head> 
<title>TEST</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
</head> 
<body onload="initialize()"> 
     <div> 
       <?php do { // horizontal looper?> 
        <?php echo $row_my_query['name'].' '.$row_my_query['address'].' '.$row_my_query['city'].', '.$row_my_query['state']; ?> 
        <?php echo substr($row_my_query['zip'],0,5); ?><br> 
       <?php $row_my_query = mysql_fetch_assoc($my_query); 
       } while ($row_my_query); //end horizontal looper ?> 
      </div> 
     <div id="map_canvas" style="width: 300px; height: 300px;"></div> 
</body> 
</html> 

はV2 IS:これは終わりますページに1つのリストが表示され、地図がまったく機能しない:

<?php 
mysql_select_db($database_db, $db); 
$query_my_query = "SELECT * FROM biz WHERE state = 'MO' and city = 'springfield' order by name asc limit 0,5 "; 
$my_query = mysql_query($query_my_query, $db) or die(mysql_error()); 
$row_my_query = mysql_fetch_assoc($my_query); 
$totalRows_my_query = mysql_num_rows($my_query); 

$address = $row_my_query['address']; 
$city = $row_my_query['city']; 
$state = $row_my_query['state']; 

?> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var geocoder; 
    var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(34.052234,-118.243685); 

     var addresses = []; 
     <?php while ($row = mysql_fetch_assoc($my_query)) { ?> 
     addresses.push(<?php echo '"' . $row['address'].', '.$row['city'].', '.$row['state'] . '"'; ?>); 
     <?php } ?> 


    var myOptions = { 
     zoom: 14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
for(i in addresses) { 
    var address = addresses[i]; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
     } else { 
      // alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 
</script> 
<head> 
<title>TEST</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
</head> 
<body onload="initialize()"> 
     <div> 
       <?php do { // horizontal looper?> 
        <?php echo $row_my_query['name'].' '.$row_my_query['address'].' '.$row_my_query['city'].', '.$row_my_query['state']; ?> 
        <?php echo substr($row_my_query['zip'],0,5); ?><br> 
       <?php $row_my_query = mysql_fetch_assoc($my_query); 
       } while ($row_my_query); //end horizontal looper ?> 
      </div> 
     <div id="map_canvas" style="width: 300px; height: 300px;"></div> 
</body> 
</html> 

助けてください!私はこの問題を解決する方法を私の人生のために考え出すことはできませんが、私は何とか私の目の前に答えがなければならないことを知っています。いつものように

おかげで....

答えて

2

1) あなたは、クエリからの結果セットを反復処理し、その後、アドレスのjavascript配列を生成するPHPのループを必要としています。

var addresses = []; 
<?php while ($row = mysql_fetch_assoc($my_query)) { ?> 
addresses.push(<?php echo '"' . $row['address'].', '.$row['city'].', '.$row['state'] . '"'; ?>); 
<?php } ?> 

2)あなただけ生成されたアドレスの配列を反復するために、あなたのgeocoder.geocode関数呼び出しの周りjavascriptのループをラップ...と

var address = '<?php echo $address.', '.$city.', '.$state; ?>'; 

は、ラインを交換してください。

for(i in addresses) { 
    var address = addresses[i]; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
     } else { 
      // alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 

これは意味があります。

+0

返信いただきありがとうございます。それは過去の就寝時間ですが、私は朝にこれを試すのを待つことができません。私はそれがどのように進むのかを知らせます。 – Kevin

+0

私はこのソリューションを試しましたが、うまく動作しませんでした。すべてのリスティングを表示し、最初のリスティングのみをマッピングする代わりに、ページには最初のリスティングのみが表示され、マップはまったく表示されません。 – Kevin

関連する問題