google place autocomplete 구현

Question

이것은 장소 자동 완성 및 검색을위한 코드입니다.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"> 
</script> 
<script> 
var geocoder; 
var map; 
function initialize() { 

var input = document.getElementById('address'); 
var options = { 

    componentRestrictions: {country: "in"} 
}; 
var autocomplete = new google.maps.places.Autocomplete(input,options); 
geocoder = new google.maps.Geocoder(); 


//var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999); 

var mapOptions = { 
zoom: 15, 
//center: latlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 

} 

map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 

} 



function codeAddress() { 
var address = document.getElementById('address').value; 


geocoder.geocode({ 'address': address}, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 

map.setCenter(results[0].geometry.location); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location 
    }); 
} else { 
    alert('Geocode was not successful for the following reason: ' + status); 
} 
}); 
} 


google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

이것은 내 HTML 코드입니다.

<input id="address" type="textbox" size="30"> 
    <input type="button" value="Search" onclick="codeAddress()"> 

잘 작동하지만 버튼을 클릭하고 싶지 않습니다. 제안이 표시되고 사용자가 제안 옵션을 선택하면지도가 해당 위치로 이동해야합니다. 어떻게해야합니까 ???

사용자가 드롭 다운에서 옵션을 선택하면지도가 해당 위치로 이동해야합니다.

Answer 1

이 내 작업 코드 ..

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"> 
</script> 
<script> 
var geocoder; 
var map; 
function initialize() { 

var input = document.getElementById('address'); 
var options = { 

componentRestrictions: {country: "in"} 
}; 
var autocomplete = new google.maps.places.Autocomplete(input,options); 
geocoder = new google.maps.Geocoder(); 


//var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999); 

var mapOptions = { 
zoom: 15, 
//center: latlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 

} 

map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 
var infowindow = new google.maps.InfoWindow(); 
var marker = new google.maps.Marker({ 
map: map, 
anchorPoint: new google.maps.Point(0, -29) 
}); 
google.maps.event.addListener(autocomplete, 'place_changed', function() { 

infowindow.close(); 

marker.setVisible(false); 
var place = autocomplete.getPlace(); 
if (!place.geometry) { 
    return; 
} 

if (place.geometry.viewport) { 
    map.fitBounds(place.geometry.viewport); 
} else { 
    map.setCenter(place.geometry.location); 
    map.setZoom(17); // Why 17? Because it looks good. 
} 
marker.setIcon(/** @type {google.maps.Icon} */({ 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(35, 35) 
})); 
marker.setPosition(place.geometry.location); 
marker.setVisible(true); 
var address = ''; 
if (place.address_components) { 
    address = [ 
    (place.address_components[0] && place.address_components[0].short_name || ''), 
    (place.address_components[1] && place.address_components[1].short_name || ''), 
    (place.address_components[2] && place.address_components[2].short_name || '') 
    ].join(' '); 
} 

infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
infowindow.open(map, marker); 


}); 

} 



function codeAddress() { 
var address = document.getElementById('address').value; 


geocoder.geocode({ 'address': address}, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 

map.setCenter(results[0].geometry.location); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location 
    }); 
} else { 
    alert('Geocode was not successful for the following reason: ' + status); 
} 
}); 
} 


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

</script> 

이제 사용자가 그 장소로 이동합니다 드롭 다운 및지도에서 옵션을 선택할 수 있습니다. 또한 검색 버튼을 클릭 할 때도 마찬가지입니다.

Answer 2

this example 및 place_changed 이벤트 구현을 살펴보십시오.

var place = autocomplete.getPlace(); 

// If the place has a geometry, then present it on a map. 
if (place.geometry.viewport) { 
    map.fitBounds(place.geometry.viewport); 
} else { 
    map.setCenter(place.geometry.location); 
}  

이렇게하면지도를 자동 완성 결과의 위치로 이동할 수 있습니다.

Answer 3

희망이 당신에게

function initialize(){ 

var mapOptions = {//Map Properties 
    zoom:12, 
    center: Bangalore 
}; 

googleMap = new google.maps.Map(document.getElementById('map-holder'),mapOptions);//map-holder is a div which holds map in my html 

var defaultBounds = new google.maps.LatLngBounds(//bounds for Bengaluru 
    new google.maps.LatLng(12.7342888,77.3791981), 
    new google.maps.LatLng(13.173706,77.8826809) 
); 

googleMap.fitBounds(defaultBounds); 

var input = (document.getElementById('searchInput'));//search input element 
googleMap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);//binding it to map 

var searchBox = new google.maps.places.SearchBox((input)); 

google.maps.event.addListener(searchBox, 'places_changed', function() {//triggers when search is performed 

    var places = searchBox.getPlaces(); 

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

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

    for (var i = 0, place; place = places[i]; i++) { 
     bounds.extend(place.geometry.location); 
     //googleMap.fitBounds(place.geometry.viewport); 
    } 
    googleMap.fitBounds(bounds); 
}); 

google.maps.event.addListener(googleMap, 'bounds_changed', function() { 
    var bounds = googleMap.getBounds(); 
    searchBox.setBounds(bounds); 
}) 
} 

도움이 될