Google maps добавляет вкладки в маркеры infowindow

Question

Я провел некоторое исследование в том, что там было, чтобы дать вкладки API v3 и придумали инфооббюро, как хороший источник для вкладных infowindows. Я не пытаюсь выяснить, могу ли я добавить вкладку позже уже созданной информационной панели. У меня есть несколько событий, которые извлекаются из базы данных в xml, а затем в java-скрипт для размещения на карте, но некоторые из них имеют одно и то же местоположение, но разные даты других потенциальных маркеров. У маркеров или информационных окон есть идентификаторы, которые можно повторить, чтобы проверить, существует ли маркер для местоположения для карты? а затем, если это так, добавьте вкладку в infobubble/infowindow?

Я думаю, что infoBubble.addTab(title, content) - это способ сделать это, но как я узнаю, к какому маркеру/инфообубе, чтобы добавить его?

Update (здесь это код у меня есть, что, кажется, замораживании хром):

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

Update: Я немного ленив, чтобы написать код, но ниже идея. Это то, что вы ищите?

// declare and initialise an array of {marker: <marker>, ib: <infoBubble>} prior 

for(var i=0; i<markerArray.length; i++) { 
    if(markerArray[i].marker is already there) { 
     markerArray[i].ib.addTab() // or 
     markerArray[i].ib.updateTab() 
    } else { 
     var newMarker = create new marker() 
     var newIB = create new inforBubble() 

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

     markerArray[i].marker = newMarker 
     markerArray[i].ib= newIB 
    } 
}); 

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