Google지도 마커로드 마지막 레코드

Question

정보 창과 함께 Google지도에 마커 그룹을 추가하려고합니다. 이 작업을 수행하는 PHP와 자바 스크립트의 혼합을 사용하여, PHP는 데이터베이스에서 모든 레코드를 가져옵니다 다음 자바 스크립트는 데이터베이스에서 가져온 좌표와 함께 모든 마커를지도에 추가합니다. 사용자들이하여 검색 할 우편 번호를 입력 곳

<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); 
    }); 
}