Google지도에서 마커에 탭 추가 infowindow

Question

API v3에 탭을 제공하기 위해 몇 가지 조사를 해봤으며 탭 정보창을 찾는 좋은 정보원으로 infobubble을 제안했습니다. 이미 작성된 infobubble에 나중에 탭을 추가 할 수 있는지 파악하려고하지 않습니다. 몇 가지 이벤트는 데이터베이스에서 XML로 가져온 다음 자바 스크립트로 가져 와서지도에 표시하지만 일부는 같은 위치에서 다른 잠재적 인 마커의 다른 날짜를 공유합니다. 마커 또는 정보창에는 위치 마커가지도에 이미 존재하는지 확인하기 위해 반복 할 수있는 ID가 있습니까? 그런 경우에는 infobubble/infowindow에 탭을 추가하십시오.

내 생각에 infoBubble.addTab(title, content)이 그것을 수행하는 방법이라고 생각하지만 어떻게 추가 할 수있는 마커/infobubble을 알 수 있습니까? 아래

var location_icon = new google.maps.MarkerImage('../images/FAFSA_Logo_icon.png'); 
var map; 
var markersArray= []; 
    function load() { 

    map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(33.961586, -106.008728), 
     zoom: 6, 
     mapTypeId: 'roadmap' 
    }); 
    var infoBubble = new InfoBubble({maxWidth: 300}); 


    downloadUrl("../site_parts/mapmysql.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("event_name"); 
     var address = markers[i].getAttribute("venue_address"); 
     var city = markers[i].getAttribute("venue_city"); 
     var state = markers[i].getAttribute("venue_state"); 
     var zip = markers[i].getAttribute("venue_zip"); 
     var website = markers[i].getAttribute("venue_website"); 

     var date = markers[i].getAttribute("event_date"); 
     var start_time = markers[i].getAttribute("event_start_time"); 
     var end_time = markers[i].getAttribute("event_end_time"); 
     var room = markers[i].getAttribute("event_room"); 
     var cord = markers[i].getAttribute("ec_fname") + " " + markers[i].getAttribute("ec_lname"); 
     var cord_email = markers[i].getAttribute("ec_email"); 
     var cord_pnumber = markers[i].getAttribute("ec_pnumber"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("venue_lat")), 
      parseFloat(markers[i].getAttribute("venue_lng"))); 
     var html = "<b>" + name + "</b> <br/>" + address +", "+ city +", "+ state +", "+ zip + "<br/>" +"<b>Date </b> "+ date +"<br/>" +"<b>Time </b> "+ start_time + " - "+ end_time +"<br/>" + "<b>Room </b>" + room + "<br/>"+ "<b> Cordinator </b>" + cord + " " + "<a href='mailto:" + cord_email + "?Subject=FAFSA%20FFA%20Event'>" + cord_email + "</a> " + cord_pnumber; 
     var icon = location_icon; 
      for (var i = 0; i < markersArray.length; i++){ 
       if (markersArray[i].getPosition()=point){ 
        addtabFunction(markersArray[i], map, date, html); 
        break; 
       } if (i > markersArray.length){continue} else{ 

      var marker = new google.maps.Marker({map: map, position: point, icon: icon}); 
        markersArray.push(marker); 
        bindinfoBubble(marker, map, infoBubble, date, html) 
        break; 
       } 
      } 
     } 
    }); 
    } 

function bindinfoBubble(marker, map, infoBubble, date, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoBubble.addTab(date, html) 
    infoBubble.open(map, marker); 
    }); 
} 

function addtabFunction (marker, map, date, html){ 
    infoBubble.open(map, marker); 
    infoBubble.addTab(date, html); 
} 

function downloadUrl(url,callback) { 
var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : 
    new XMLHttpRequest; 

request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
    request.onreadystatechange = doNothing; 
    callback(request, request.status); 
    } 
}; 

request.open('GET', url, true); 
request.send(null); 
} 

function doNothing() {} 

Answer 1

마커를 가정하면 이미 생성되어 당신이 무엇을 :

업데이트은 (여기에 크롬을 동결 할 것으로 보인다 내가 가지고있는 코드입니다).

google.maps.event.addListener(marker, 'click', function() { 
     if (!infoBubble.isOpen()) { 
     infoBubble.open(map, marker); 
     } 
}); 

출처 : View the source of this example

업데이트 : 내가 코드를 작성하는 게으른 조금 해요,하지만 아래의 생각이다. 이게 너가 찾고있는거야?

Answer 2

지도에 마커를 배치하는 latlng가 포함 된 배열을 가지고 있다고 가정합니다. 따라서 문제를 해결할 수있는 방법은 마커를 배치 할 때마다 기존 마커가있는 배열을 검색 할 수 있다는 것입니다.

마커를 저장하는 다른 배열을 만들었습니다. 나중에이 배열을 검색하여 이벤트 리스너를 연결하는 동안 위치가 일치하는지 확인합니다. 아래 예제를 참조하십시오.

예 (이을 테스트하지) -

var markersArray= []; 
for (var i = 0; i < latlngArray.length; i++) { 
    var lat = parseFloat(latlngArray[//some index]); 
    var lng = parseFloat(latlngArray[//some index]); 
    var pos = new google.maps.LatLng(lat, lng); 
    marker = new google.maps.Marker({ position: pos, map: map }); 
    markersArray.push(marker); 
    if(markersArray[i].getPosition().equals(marker.getPosition())) 
    { 
    addTab(markersArray[i]) 
    } 
    else 
    { 
    openBubble(marker); 
    } 
} 
function openBubble(currentMarker)     
{ 
    google.maps.event.addListener(currentMarker, 'click', function() { 
     if (!infoBubble.isOpen()) { 
     infoBubble.open(map, marker); 
     } 
    }); 
    } 
} 
function addTab(existingMarker) 
{ 
    google.maps.event.addListener(existingMarker, 'click', function() { 
    infoBubble.addTab(title,content); 
    }); 
}