Google地图搜索我的标记

时间:2014-08-22 08:12:27

标签: javascript google-maps search google-maps-api-3

所以我放了两个标记(会更多),我的地图上方有一个搜索栏。我希望能够使用此搜索栏搜索关键字,并使用这些关键字将地图中心放在标记上。我假设我会按照向我的标记添加自定义标记的方式执行某些操作,但我不确定这是如何工作的,因为我在for循环中创建标记。我真的不知道如何开始实现这样的东西。但这是我的代码:

var locations = [
            ['Passage Island', 49.343085, -123.305938, 'http://tylerkohlhaas.github.io/waterscout/passage.html'],
            ['Point Atkinson', 49.329925, -123.264994, 'http://tylerkohlhaas.github.io/waterscout/patkinson.html']
        ];
var i;

        for(i=0; i < locations.length; i++)
        {
            var markers = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
                map: map,
                clickable: true,
                url: locations[i][3],
                zIndex: 1
            });

            google.maps.event.addListener(markers, 'click', function(){
                window.location.href = this.url; 
            });
        }

我的搜索栏的html非常基础:

<form>
            <input type="search", class="SearchBar", placeholder="Search for an area", name="Search", target="_self", size=50>

任何帮助或建议将不胜感激!             

1 个答案:

答案 0 :(得分:3)

您可以执行以下操作:

var locations = [
        ['Passage Island', 49.343085, -123.305938, 'http://tylerkohlhaas.github.io/waterscout/passage.html',['tag1','tag2']],
        ['Point Atkinson', 49.329925, -123.264994, 'http://tylerkohlhaas.github.io/waterscout/patkinson.html',['tag3','tag4']]
    ];
    var i;
    var markerArray=[];

    for(i=0; i < locations.length; i++)
    {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
            map: map,
            clickable: true,
            url: locations[i][3],
            zIndex: 1,
            searchTag: locations[i][4],
            searchName: locations[i][0]
        });

        google.maps.event.addListener(marker, 'click', function(){
            window.location.href = this.url; 
        });
        markerArray.push(marker);
    }

在搜索功能中,您将在markerArray中使用searchTag和searchName字段。 I.E.如果您想查看第一个标记,您将使用markerArray[0]['searchTag']

之类的内容