Google지도 api v3에 자동 완성 기능을 추가 할 수 있습니까?

Question

나는 자동 완성 구글 검색을 사용하고 싶지만 나는 개인적인 장소

을 소개 할

이 내 장소하지만 onclick을 나던 작업 검색에 추가하는 데 사용되는 코드이었다

$(".pac-container").append('<div id="areasearch' + e + '" class="pac-item areasearch" style="display:none" onclick="clickOneAreaLocalizar(\'' + $(this).text() + '\')"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>' + $(this).text() + '</span> <span>Area</span></div>'); 

이 인을 결과 :

그리고 이것이 내가 입력에 검색을 추가하는 데 사용하는 코드입니다 :

var input = /** @type {HTMLInputElement} */(document.getElementById('searchbox')); 

    var searchBox = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(input), { types: ['geocode'] }); 

    google.maps.event.addListener(searchBox, 'place_changed', function() { 
     try{ 
       var places = searchBox.getPlace(); 

       if (places.length == 0) { 
        return; 
       } 

       var bounds = new google.maps.LatLngBounds(); 

       bounds.extend(places.geometry.location); 

       map.fitBounds(bounds); 
     }catch(e){ 
      codeAddress(); 
     } 

    }); 

(3210)는 내가

jsfiddle

이 결과 쿼티가 온 클릭 하나를 가지고 싶지만

누구든지 방법이 작업을 수행하는 어떤 생각이 작동하지 않습니다 무엇을 더 잘 이해 모두를위한이 예제를 만들어?

감사의 :

Answer 1

나는이

$(document).ready(function(){ 

    var mapOptions = { 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(41.06000,28.98700) 
    }; 

    var map = new google.maps.Map(document.getElementById("map"),mapOptions); 

    var geocoder = new google.maps.Geocoder(); 
    searchBoxMapAddress = function() { 

     // Create the search box and link it to the UI element. 
     var input = /** @type {HTMLInputElement} */(document.getElementById('searchbox')); 

     var searchBox = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(input), { types: ['geocode'] }); 

     // Listen for the event fired when the user selects an item from the 
     // pick list. Retrieve the matching places for that item. 
     google.maps.event.addListener(searchBox, 'place_changed', function() { 

        var places = searchBox.getPlace(); 


        // For each place, get the icon, place name, and location. 

        var bounds = new google.maps.LatLngBounds(); 

        bounds.extend(places.geometry.location); 

        map.fitBounds(bounds); 


     }); 

     // Bias the SearchBox results towards places that are within the bounds of the 
     // current map's viewport. 
     google.maps.event.addListener(map, 'bounds_changed', function() { 
      var bounds = map.getBounds(); 
      searchBox.setBounds(bounds); 
     }); 

    } 
    setTimeout(function(){ 
    $(".pac-container").append('<div id="areasearch" class="pac-item areasearch" onclick="alert(\'make onclick\')"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>qwerty</span> <span>Area</span></div>'); 
    }, 500); 
    searchBoxMapAddress(); 
    }); 

jsfiddle

Answer 2

당신은이

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('YourAutocomplete')); 

       setTimeout(function(){ 
        $(".pac-container").append('<div id="are" class="pac-item" onmousedown="alert(\'Yes workingt\')"><span class="pac-icon icon-airport"></span><span class="pac-item-query"><span class="pac-matched"></span>sample Address</span> <span>it\'s Working</span></div>'); 
       }, 500);