Google지도 InfoWindow 콘텐츠 - 동적로드시 클릭 (jquery-ui-maps 사용)

Question

Google지도에 약 3000 개의 마커가있는 프로젝트가 있습니다. 더 나은 프리젠 테이션을 위해 MarkerClusterer 및 Filtering과 함께 jquery-ui-maps를 사용합니다.

"마커 데이터"는 JSON 파일을 통해로드됩니다.

모든 "infoWindowContent"를 JSON 파일에 포함 시키면 커질 것입니다. 필자는 마커 ID로 파일을로드하고 호출 된 파일의 결과로 설정된 내용을 갖는 함수를 호출하고 싶습니다. 여기

내가 지금 뭐하는 거지의 간단한 예입니다 :이 솔루션을 발견

$(function() 
{ 
    $('#map').gmap(
    { 
     'disableDefaultUI':false, 
     'zoom': 5, 
     'center':'<?=$mylat?>,<?=$mylon?>', 
     'callback': function() 
     { 
      var tags = [<...GETTING LIST OF AVAILABLE TAGS HERE ... >]; 
      $.each(tags, function(i, tag) 
      { 
       $('#sidebar').append(('<label style="margin-right:5px;display:block;"><input type="checkbox" style="margin-right:3px" value="{0}"/>{1}</label>').format(tag, tag)); 
      }); 
      var self = this; 
      $.getJSON('< LOADING JSON FILE)?>', function(data) 
      { 
       $.each(data.markers, function(i, marker) 
       { 
        var tags = marker.tags.split(','); 
        self.addMarker(
        { 
         'position': new google.maps.LatLng(marker.lat, marker.lon), 
         'icon':marker.icon, 
         'tags':tags 
        }) 
        .click(function() 
        { 
         //self.openInfoWindow({ 'content':marker.c}, this); => if supplying Conent in JSON file ... works all right, but JSON file is to BIG 

// THIS IS, WHERE I NEED SOME ADVICE ... 
             self.openInfoWindow({ 'content':marker.id }, this); 
// I want to load a dynamic content for this ID only, if the marker is clicked and the Info Window will be shown 
        }); 
       }); 
       self.set('MarkerClusterer', new MarkerClusterer(self.get('map'), self.get('markers'), 
       { 
        'maxZoom':12 
       })); 
       self.addMarker({ 'icon':'/code/geo/images/gmap_pin_blue.png','position':'<?=$mylat?>,<?=$mylon?>','title':'You are here'}).click(function(){ 
        self.openInfoWindow({'content':'Your current position' }, this); 
       }); 
       $('#sidebar').show(); 
      }); 

      $('#sidebar input:checkbox').click(function(e) 
      { 
       e.preventDefault; 
       $('#map').gmap('closeInfoWindow'); 
       $('#map').gmap('set', 'bounds', null); 
       var filters = []; 
       $('#sidebar input:checkbox:checked').each(function(i, checkbox) 
       { 
        filters.push($(checkbox).val()); 
       }); 

       if (filters.length > 0) 
       { 
        var markerList=[]; 
        var i=1; 
        self.find('markers',{'property':'tags','value': filters,'operator':'AND'}, function(marker, isFound) 
        { 
         if(isFound) 
         { 
          markerList.push(marker); 
          i=i+1; 
         } 
        }); 
        var filterInfo = filters.join(' && '); 
        $('#result_selection').html("Current Filter: " + filterInfo + " => Results: " + (i-1)); 
        console.log("Current Filter: " + filterInfo + " => Results: " + (i-1)); 
        self.get('MarkerClusterer').clearMarkers(); 
        self.get('MarkerClusterer').addMarkers(markerList); 
        self.get('MarkerClusterer').redraw_(); 
       } 
       else 
       { 
        self.get('MarkerClusterer').clearMarkers(); 
        $('#result_selection').html('No Filter applied!'); 

        $('#map').gmap('set','MarkerClusterer', new MarkerClusterer(self.get('map'), self.get('markers'), 
        { 
         'maxZoom':12 
        })); 
       } 
       self.addMarker({ 'icon':'/code/geo/images/gmap_pin_blue.png','position':'<?=$mylat?>,<?=$mylon?>','title':'You are here'}).click(function(){ 
       self.openInfoWindow({'content':'Your Position' }, this); 
       }); 
      }); 
      return false; 
     } 
    }); 
}); 

하지만 방법이 위 스크립트에 포함 할 수있다? Google Maps V3: Loading infowindow content via AJAX

고맙습니다!

기독교

Answer 1

OK .. 그것을 알아 냈다 ...

어디를 목표로하는 알면 기본적으로는 간단합니다.

마커를 추가 한 후 (는 클릭() 함수의 여기)은 "청취자를"적응과 아약스를 통해 동적 데이터를 얻을 :

스크립트 위의 내부

: 여기

   self.addMarker(
       { 
        'position': new google.maps.LatLng(marker.la, marker.lo), 
        'icon':mico, 
        'tags':tags 
        //, 'bounds': true 
       }) 
       .click(function() 
       { 
        var content = load_content(marker.f); 
        self.openInfoWindow({ 'content': content}, this); 
       }); 

그리고이 기능의 Ajax를 통해로드 된 데이터를 가져 와서 데이터를 반환하십시오.

function load_content(id){ 
    var html = $.ajax({ 
     url: "/getYourDataHere.php?id="+id, 
     async: false}).responseText; 
    return html; 
} 

아마도 이러한 해결책을 찾는 사람에게 도움이 될 것입니다.