Google지도 API 마커 자바 스크립트

Question

자바 스크립트를 실행하면 설정 한 MYSQL 테이블에서 XML 파일을 빌드합니다. 그것은 작동하고 계획대로 모든 마커를 그립니다. 이제 드롭 다운 필터를 연결하려고합니다. 나는 많은 예를 샅샅이 뒤졌지만 그것이 내 작품으로는 잘 돌아갈 수 없다.

는이 같은 드롭 다운에 대한 변수를 추가 :

이제

var MeetingType = document.getElementById("Meeting_Type"); 
var type = MeetingType.options[MeetingType.selectedIndex].text; 
var DayofMeeting = document.getElementById("Day_of_Meeting"); 
var day = DayofMeeting.options[DayofMeeting.selectedIndex].text; 
var TimeofMeeting = document.getElementById("Time_of_Meeting"); 
var time = TimeofMeeting.options[TimeofMeeting.selectedIndex].text; 

나는 그들이 작성 후에 내 마커의 배열을 만들려고하고, 그래서 그렇게처럼 그들을 필터링 할 수 있습니다

for (var i = 0; i < placemarkers.length; i++) { 
    if (placemarkers[i].type==type&&placemarkers[i].day==day&&placemarkers[i].time==time){ 
    placemarkers[i].setMap(MYMAP.map); 
    }else{ 
    clearOverlays(); 
    mymarkers=[] 
     } 
    } 
} 

을

전체 코드는 다음과 같습니다. 아무도 배열에 이러한 값을 얻을 수 있습니까? 내 것은 작동하지 않습니다.

$(document).ready(function() { 
$("#map").css({ 
    height: 500, 
    width: 600 
}); 
var myLatLng = new google.maps.LatLng(43.653823, -79.382843); 
MYMAP.init('#map', myLatLng, 11); 

$("#showmarkers").click(function(e){ 
    MYMAP.placeMarkers('include/xml.php'); 
}); 
}); 

var MYMAP = { 
map: null, 
bounds: null 
} 

MYMAP.init = function(selector, latLng, zoom) { 
var myOptions = { 
    zoom:zoom, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
this.map = new google.maps.Map($(selector)[0], myOptions); 
this.bounds = new google.maps.LatLngBounds(); 
} 

var markerfilter = new Array(); 
MYMAP.placeMarkers = function(filename) { 
$.get(filename, function(xml){ 
    $(xml).find("marker").each(function(){ 
     var name = $(this).find('name').text(); 
     var address = $(this).find('address').text(); 
     var address2 = $(this).find('address2').text(); 
     var Meeting_Type = $(this).find('Meeting_Type').text(); 
     var Time_of_Meeting = $(this).find('Time_of_Meeting').text(); 
     var Day_of_Meeting = $(this).find('Day_of_Meeting').text(); 
     var Open_Meeting = $(this).find('Open_Meeting').text(); 
     var Wheelchair = $(this).find('Wheelchair').text(); 
     var ASL = $(this).find('ASL').text(); 
     var Comments = $(this).find('Comments').text(); 
     markerfilter.push(marker); 

     var MeetingType = document.getElementById("Meeting_Type"); 
     var type = MeetingType.options[MeetingType.selectedIndex].text; 
     var DayofMeeting = document.getElementById("Day_of_Meeting"); 
     var day = DayofMeeting.options[DayofMeeting.selectedIndex].text; 
     var TimeofMeeting = document.getElementById("Time_of_Meeting"); 
     var time = TimeofMeeting.options[TimeofMeeting.selectedIndex].text; 

     // create a new LatLng point for the marker 
     var lat = $(this).find('lat').text(); 
     var lng = $(this).find('lng').text(); 
     var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); 

     // extend the bounds to include the new point 
     MYMAP.bounds.extend(point); 

     var marker = new google.maps.Marker({ 
      position: point, 
      map: MYMAP.map 
     }); 

     var infoWindow = new google.maps.InfoWindow(); 
     var html='<b><u>'+name+'</b></u><br />'+address2+'<br />'+address+'<br />'+Meeting_Type+',&nbsp'+Time_of_Meeting+',&nbsp'+Day_of_Meeting+'<br />Open Meeting:&nbsp'+Open_Meeting+'<br />Wheelchair Accessible:&nbsp'+Wheelchair+'<br />ASL:&nbsp'+ASL+'<br />Comments:&nbsp'+Comments; 
     google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(html); 
      infoWindow.open(MYMAP.map, marker); 
     }); 
     MYMAP.map.fitBounds(MYMAP.bounds); 
    }); 
}); 
} 

나는 내가 만든 몇 가지 변경 사항을 반영하기 위해 내 코드를 편집 한하지만 여전히 작동하지 않습니다. 도움이된다면

Answer 1

코드의 나머지 부분을 모른 채가 좋은 유연성을 가지고로/아래 그

http://www.welancers.com/jquery-map-marker-plugin/

Answer 2

에 대한 링크입니다, JQuery와지도 마커 플러그인을 시도, 가장 직접적인 방법은하는 것

var marker = new google.maps.Marker({ 
     position: point, 
     map: MYMAP.map 
    }); 
    mymarkers.push(marker);