2

「近くのATM」、「近くの病院」、「近くのバス停」などのユーザーのクエリに基づいて、近くのすべての関心のあるポイントを取得しようとしています。次のjsコードを使用しました:

function initialize_search() {

var input = document.getElementById('search');
var autocomplete = new google.maps.places.Autocomplete(input);
}

google.maps.event.addDomListener(window, 'load', initialize);

var resultList = [];
var service = new google.maps.places.PlacesService(map);
var search = document.getElementById('search').value;  
var request = {
    location: map.getCenter(),
    radius: '5000',
    query: search,            
};

service.textSearch(request, function(results, status, pagination){
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        resultList = resultList.concat(results);
        plotResultList();
    }
});

var overlays = [];

function plotResultList(){
    var iterator = 0;                  
    for(var i = 0; i < resultList.length; i++){
        setTimeout(function(){

            var marker = new google.maps.Marker({
                position: resultList[iterator].geometry.position,
                map: map,
                title: resultList[iterator].name,
                animation: google.maps.Animation.DROP
            });

            overlays.push(marker);

            iterator++;
        }, i * 75);
    }
}

var infoWindow = new google.maps.InfoWindow();      
google.maps.event.addListener(marker, 'click', function() {
    infoWindow.close();
    var request = {
        reference: resultList[iterator].reference
    };

    service.getDetails(request, function(place, status){
        var content = "<h2>" + name + "</h2>";
        if(status == google.maps.places.PlacesServiceStatus.OK){    
            if(typeof place.rating !== 'undefined'){
                content += "<p><small>Rating: " + place.rating + "</small></p>"; 
            }    

            if(typeof place.formatted_address !== 'undefined'){
                content += "<br><small>" + place.formatted_address + "</small>";
            }

            if(typeof place.formatted_phone_number !== 'undefined'){
                content += "<br><small><a href='tel:" + place.formatted_phone_number + "'>" + place.formatted_phone_number + "</a></small>";                                 
            }

            if(typeof place.website !== 'undefined'){
                content += "<br><small><a href='" + place.website + "'>website</a></small>";

            }
        }                            

        infoWindow.setContent(content);
        infoWindow.open(map, marker);         
    });
});

私が使用しているhtmlコードは次のとおりです。

<div id="search">
      <input id="target" type="text" placeholder="Search Box">
      <button onclick="plotResultList();">Search</button>
    </div>
    <div id="map-canvas"></div>

これをブラウザに読み込んでいるときに、検索ボックスが機能しません。場所を提案することもありません。Google マップのウェブサイトで「近くの ATM」と入力すると、近くのすべての ATM が表示されます。これをコードに実装するにはどうすればよいですか?

4

0 に答える 0