2013-09-20 5 views
0

Я создаю каталог, в этом примере это каталог для врачей. Я создал массив javascript под названием «местоположения». Посетитель может проверить флажки на карте, чтобы выбрать, какой вид врача должен отображаться.Google Map One Infobox Open

Это образец массива мест Переберите в цикле

var locations = [ 
    [0, 'Total Care', 1, 0, 0, 0, 0, 0, 'Lake Elsinore', '92530', 'CA', 33.6603, -117.3830, '(951) 674-8779', 1], 
    ... etc 
    ]; 

Это объясняет каждый ключ

locations[i][0] = business claimed or not (0 = unclaimed and 1 is claimed) 
locations[i][1] = name 
locations[i][2] = if general practitioner = 1, else = 0 
locations[i][3] = if surgeon = 1, else = 0 
locations[i][4] = if cardiologist = 1, else = 0 
locations[i][5] = if urologist = 1, else = 0  
locations[i][6] = if gynecologist = 1, else = 0 
locations[i][7] = if pulmonologist = 1, else = 0 
locations[i][8] = city 
locations[i][9] = zip code 
locations[i][10] = state 
locations[i][11] = latitude 
locations[i][12] = longitude 
locations[i][13] = phone number 
locations[i][14] = z-index 

Все работает отлично. У меня есть функция поиска, поэтому посетитель может искать по имени. В приведенном ниже коде google map я хочу найти способ открыть infoBox на маркере врача, который был введен в функцию поиска, например.
если (места [я] [1] == «Имя врача») {
код здесь}

Я пытался найти решение в течение последних трех дней и не могу найти его, так что я было бы очень полезно помочь. Это код карты Google:

var infoBox = null; 
function initialize() 
    { 
    var centerMap = new google.maps.LatLng(33.6603, -117.3830); 
    var mapOptions = {zoom: 11,center: centerMap,mapTypeId: google.maps.MapTypeId.ROADMAP} 
    var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 
    setMarkers(map, locations); 
    } 

function setMarkers(map, markers) 
    { 
    var image = {url: 'images/marker.png',size: new google.maps.Size(17, 23),origin: new google.maps.Point(0,0),anchor: new google.maps.Point(8, 23)}; 
    gpr = $('#check1').is(':checked') ? 1 : 0; // general practitioner 
    srg = $('#check2').is(':checked') ? 1 : 0; // surgeon 
    car = $('#check3').is(':checked') ? 1 : 0; // cardiologist 
    uro = $('#check4').is(':checked') ? 1 : 0; // urologist 
    gyn = $('#check5').is(':checked') ? 1 : 0; // gynecologist 
    pul = $('#check6').is(':checked') ? 1 : 0; // pulmonologist 

    for (var i = 0; i < markers.length; i ++) 
     { 
     var locations = markers[i]; 
     var siteLatLng = new google.maps.LatLng(locations[11], locations[12]); 
     var boxText = document.createElement('div'); 
     boxText.style.cssText = 'some styling'; 
     link = locations[1].replace(' ','_'); 
     link = link.toLowerCase(); 

     // find out if this genre of doctor was searched for 
     setMarker = 0; 
     if (gpr == 1){if (locations[2] == 1){setMarker = 1;}} 
     if (srg == 1){if (locations[3] == 1){setMarker = 1;}} 
     if (car == 1){if (locations[4] == 1){setMarker = 1;}} 
     if (uro == 1){if (locations[5] == 1){setMarker = 1;}} 
     if (gyn == 1){if (locations[6] == 1){setMarker = 1;}} 
     if (pul == 1){if (locations[7] == 1){setMarker = 1;}} 

     // if one of the checkboxes was checked 
     if (setMarker == 1) 
      { 
      if (locations[0]) 
       { 
       boxText.innerHTML = 'some html with link'; // claimed business 
       } 
      else 
       { 
       boxText.innerHTML = 'some html without link'; // unclaimed business 
       } 
      var infoBoxOptions = {content: boxText,disableAutoPan: false,maxWidth: 0,pixelOffset: new google.maps.Size(5, -80),zIndex: locations[14],boxStyle: {background: "url('images/tip.png') no-repeat",opacity: 0.9,width: "405px",height: "75px",border: '0px solid #900'},closeBoxMargin: "13px 5px 5px 5px",closeBoxURL: "images/close.gif",infoBoxClearance: new google.maps.Size(1, 1),isHidden: false,pane: "floatPane",enableEventPropagation: false}; 
      var marker = new google.maps.Marker({position: siteLatLng,map: map,title: locations[1],zIndex: locations[14],icon: image,html: boxText}); 
      google.maps.event.addListener(marker, 'click', function (e) {infoBox.setContent(this.html);infoBox.open(map, this);}); 
      var infoBox = new InfoBox(infoBoxOptions); 
      } 
     } 
    } 

Ваша помощь будет очень признательна. Спасибо.

+0

Вы проверили консоль на предмет ошибок JS? Кроме того, в соответствии с вашей отладкой какая часть фактически не работает - это клик, переменная инициализация ... и т. Д.? –

+0

Все работает Гаутама Бхутани. Я хочу, чтобы InfoBox открывался по умолчанию «только» на маркере имени/клиники врача, который был введен в функцию поиска, а все другие информационные боксы отображаются только при нажатии соответствующего маркера (который уже работает). Спасибо, что ответили. – Kobbe

ответ

0

Если я не понимаю, вы можете просто прокрутить маркеры до тех пор, пока название не соответствует тексту поиска, а затем откройте соответствующее информационное окно на этом маркере. Что-то вроде:

$('#searchButton').click(function() { 
    var searchText = $('#searchBox').val(); 
    for (var i = 0; i < markers.length; i++) { 
     if (markers[i].title.indexOf(searchText) > -1) 
      infoBoxes[i].open(map, markers[i]); 
    } 
}); 

В этом примере предполагается наличие двух существующих параллельных массивов маркеров и соответствующих информационных полей.

+0

Благодарим вас за ответ Джош. Открытие InfoBox не является проблемой, оно устанавливает все маркеры на карте Google, где все информационные боксы скрыты и отображаются только при нажатии на соответствующий маркер, тогда как «только один» InfoBox открыт, InfoBox, соответствующий имени врач/клиника, которая была введена в поиск. – Kobbe

+0

@Kobbe Как вы решили проблему? – rahulroy9202

+0

Привет rahulroy. Я не помню. Прошло больше года назад. Извините, я не мог помочь. – Kobbe

Смежные вопросы