Google Map One信息框已打开

Question

I am building a directory, in this example it's a directory for doctors. I created a javascript array called "locations". The visitor can check checkboxes on the map to choose which kind of doctor should be displayed.

This is a sample of the array of locations to loop through in a for loop

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

This explains each key

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

All works fine. I have a search function so the visitor can search by name. In the google map code below, I want to find a way to have the infoBox open on the marker of the doctor that was entered in the search function eg
if (locations[i][1] == "doctor name"){
code here }

I have been trying to find a solution for the past three days and can't find it, so I would really appreciate some help. This is the Google Map code:

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

Your help will be much appreciated. Thank you.

Answer 1

Unless I'm misunderstanding, you can just loop through your markers until the title matches the search text, and then open the appropriate info box on that marker. Something like:

$('#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]);
    }
});

This example assumes you have two existing parallel arrays of markers and their corresponding info boxes.