Googleマップマーカローディング最終記録

Question

私は、情報ウィンドウでそれぞれのGoogleマップにマーカーのグループを追加しようとしています。私はこれを行うためにphpとjavascriptの組み合わせを使用しています.phpはデータベースからすべてのレコードを取得し、javascriptはデータベースから取得した座標を使ってすべてのマーカーをマップに追加します。ここで

は、私がこれまで持っているものです：ユーザーは、彼らがして、検索したい郵便番号を入力するところ

<script type="text/javascript"> 
     function initialize() { 

      var latlng = new google.maps.LatLng(<?=$lat?>, <?=$long?>); 

      var settings = { 
       zoom: 12, 
       center: latlng, 
       mapTypeControl: false, 
       navigationControl: true, 
       navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
       mapTypeId: google.maps.MapTypeId.ROADMAP}; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 

      var postcodeLogo = new google.maps.MarkerImage('/images/postcode_marker.png', 
       new google.maps.Size(32,37), 
       new google.maps.Point(0,0), 
       new google.maps.Point(15,34) 
      ); 

      var propertyLogo = new google.maps.MarkerImage('/images/property_marker.png', 
       new google.maps.Size(32,37), 
       new google.maps.Point(0,0), 
       new google.maps.Point(15,34) 
      ); 

      var infowindow = new google.maps.InfoWindow(); 

      <? 
      foreach ($results as $grid_refs) 
      { 
      ?>   

        var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>); 

        propMarker = new google.maps.Marker({ 
         position: propPos, 
         map: map, 
         icon: propertyLogo, 
         title:"<?=$grid_refs['sd_name']?>", 
         zIndex: 3}); 

        var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>'; 

        google.maps.event.addListener(propMarker, 'click', function() { 
          infowindow.setContent(contentString); 
          infowindow.open(map,this); 
         }); 

      <? 
      } 
      ?> 


      var positionPos = new google.maps.LatLng(<?=$lat?>, <?=$long?>); 

      var positionMarker = new google.maps.Marker({ 
       position: positionPos, 
       map: map, 
       icon: postcodeLogo, 
       title:"<?=$_GET['searchpostcode']?>", 
       zIndex: 3}); 


     } 
    </script> 

positionMarkerです。 propMarkerはマップ上のすべての場所にマークを付けて表示します。

コードにはすべての情報が表示されていますが、地図上では最後に取得したレコードで情報ウィンドウが開き、そのマーカーに関連する情報をロードします。

私はこの質問を見てきました：

Google Maps infoWindow only loading last record on markers

動作しますが、私はPHPのforeachのを扱うループのためのJSを得るように見えるカント、私は、PHPのforeachと外以内にそれを試してみましたの。

私が必要とするのは、forearchループで変数とcontentStringの名前をマーカーを作成するたびに変更する必要があると思っていますが、これはうまくいくようですか？

ご迷惑をおかけして申し訳ありません。

Answer 1

すべてのマーカーをループしますが、最後の繰り返しでは、contentStringに設定したコンテンツがすべてのクリックイベントに使用されるようになります。

代わりに、これを別の関数に委譲します（または、クロージャを使用します）。

  <? 
      foreach ($results as $grid_refs) 
      { 
      ?>   

        var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>); 

        propMarker = new google.maps.Marker({ 
         position: propPos, 
         map: map, 
         icon: propertyLogo, 
         title:"<?=$grid_refs['sd_name']?>", 
         zIndex: 3}); 

        var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>'; 

        // add an event listener for this marker 
        bindInfoWindow(propMarker, map, infowindow, contentString); 
      <? 
      } 
      ?> 

は次に、新しい機能を追加します。

function bindInfoWindow(marker, map, infowindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(html); 
     infowindow.open(map, marker); 
    }); 
}