Google API를 사용하여 도시의 레스토랑을 검색하고 페이지에 나열하려고합니다. 감사의 말을 들어 주셔서 감사합니다.Google지도 API를 사용하여 레스토랑 검색
3
A
답변
18
이미 좋은 예가 있습니다. http://googlegeodevelopers.blogspot.co.uk/2012/05/google-places-api-search-refinements-as.html
그냥 기본에서 시작하여 최대 https://developers.google.com/places/documentation/search
가장 좋은 방법은 공장 모델로 문제를 휴식하는 당신의 방법을 작동합니다. 위치에서 결과를 얻는 기능을 개발하는 작업. 그런 다음 결과를 페이지에 매핑하는 함수로 푸시합니다. [당신이 시도 무엇?]
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var map, places, iw;
var markers = [];
var searchTimeout;
var centerMarker;
var autocomplete;
var hostnameRegexp = new RegExp('^https?://.+?/');
function initialize() {
var myLatlng = new google.maps.LatLng(37.786906,-122.410156);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
places = new google.maps.places.PlacesService(map);
google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
document.getElementById('keyword').onkeyup = function(e) {
if (!e) var e = window.event;
if (e.keyCode != 13) return;
document.getElementById('keyword').blur();
search(document.getElementById('keyword').value);
}
var typeSelect = document.getElementById('type');
typeSelect.onchange = function() {
search();
};
var rankBySelect = document.getElementById('rankBy');
rankBySelect.onchange = function() {
search();
};
}
function tilesLoaded() {
search();
google.maps.event.clearListeners(map, 'tilesloaded');
google.maps.event.addListener(map, 'zoom_changed', searchIfRankByProminence);
google.maps.event.addListener(map, 'dragend', search);
}
function searchIfRankByProminence() {
if (document.getElementById('rankBy').value == 'prominence') {
search();
}
}
function search() {
clearResults();
clearMarkers();
if (searchTimeout) {
window.clearTimeout(searchTimeout);
}
searchTimeout = window.setTimeout(reallyDoSearch, 500);
}
function reallyDoSearch() {
var type = document.getElementById('type').value;
var keyword = document.getElementById('keyword').value;
var rankBy = document.getElementById('rankBy').value;
var search = {};
if (keyword) {
search.keyword = keyword;
}
if (type != 'establishment') {
search.types = [type];
}
if (rankBy == 'distance' && (search.types || search.keyword)) {
search.rankBy = google.maps.places.RankBy.DISTANCE;
search.location = map.getCenter();
centerMarker = new google.maps.Marker({
position: search.location,
animation: google.maps.Animation.DROP,
map: map
});
} else {
search.bounds = map.getBounds();
}
places.search(search, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var icon = 'icons/number_' + (i+1) + '.png';
markers.push(new google.maps.Marker({
position: results[i].geometry.location,
animation: google.maps.Animation.DROP,
icon: icon
}));
google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
window.setTimeout(dropMarker(i), i * 100);
addResult(results[i], i);
}
}
});
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
if (centerMarker) {
centerMarker.setMap(null);
}
}
function dropMarker(i) {
return function() {
if (markers[i]) {
markers[i].setMap(map);
}
}
}
function addResult(result, i) {
var results = document.getElementById('results');
var tr = document.createElement('tr');
tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
tr.onclick = function() {
google.maps.event.trigger(markers[i], 'click');
};
var iconTd = document.createElement('td');
var nameTd = document.createElement('td');
var icon = document.createElement('img');
icon.src = 'icons/number_' + (i+1) + '.png';
icon.setAttribute('class', 'placeIcon');
icon.setAttribute('className', 'placeIcon');
var name = document.createTextNode(result.name);
iconTd.appendChild(icon);
nameTd.appendChild(name);
tr.appendChild(iconTd);
tr.appendChild(nameTd);
results.appendChild(tr);
}
function clearResults() {
var results = document.getElementById('results');
while (results.childNodes[0]) {
results.removeChild(results.childNodes[0]);
}
}
function getDetails(result, i) {
return function() {
places.getDetails({
reference: result.reference
}, showInfoWindow(i));
}
}
function showInfoWindow(i) {
return function(place, status) {
if (iw) {
iw.close();
iw = null;
}
if (status == google.maps.places.PlacesServiceStatus.OK) {
iw = new google.maps.InfoWindow({
content: getIWContent(place)
});
iw.open(map, markers[i]);
}
}
}
function getIWContent(place) {
var content = '';
content += '<table>';
content += '<tr class="iw_table_row">';
content += '<td style="text-align: right"><img class="hotelIcon" src="' + place.icon + '"/></td>';
content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b></td></tr>';
content += '<tr class="iw_table_row"><td class="iw_attribute_name">Address:</td><td>' + place.vicinity + '</td></tr>';
if (place.formatted_phone_number) {
content += '<tr class="iw_table_row"><td class="iw_attribute_name">Telephone:</td><td>' + place.formatted_phone_number + '</td></tr>';
}
if (place.rating) {
var ratingHtml = '';
for (var i = 0; i < 5; i++) {
if (place.rating < (i + 0.5)) {
ratingHtml += '✩';
} else {
ratingHtml += '✭';
}
}
content += '<tr class="iw_table_row"><td class="iw_attribute_name">Rating:</td><td><span id="rating">' + ratingHtml + '</span></td></tr>';
}
if (place.website) {
var fullUrl = place.website;
var website = hostnameRegexp.exec(place.website);
if (website == null) {
website = 'http://' + place.website + '/';
fullUrl = website;
}
content += '<tr class="iw_table_row"><td class="iw_attribute_name">Website:</td><td><a href="' + fullUrl + '">' + website + '</a></td></tr>';
}
content += '</table>';
return content;
}
google.maps.event.addDomListener(window, 'load', initialize);
+0
마침내 나는 목표에 도달했습니다. 대단히 감사합니다! – Luke
관련 문제
- 1. 필터가있는 레스토랑 검색
- 2. Google지도 APi를 사용하여
- 3. Google지도 API를 사용하여 Ajax 요청
- 4. Google지도 API를 사용하여 거리가 없습니다.
- 5. google api를 사용하여 바 및 레스토랑 위치 찾기 : android
- 6. Google지도 API가 내지도에 레스토랑, 학교 등을 표시하지 않습니다.
- 7. 검색 용 Google지도 API
- 8. 검색 주소 google지도 api
- 9. Google지도 API를 사용하는 Zend_Form의 주소
- 10. Google지도 API를 사용하여 수동 경로 조정
- 11. 오류 Google지도 API를 사용하여 Android 앱 배포
- 12. Google지도 API를 사용하여 음성 컨트롤로 tbt 탐색
- 13. Google지도 API를 사용하여 국가 별지도를 표시하는 방법
- 14. Google지도 API를 사용하여 장소 이름의 오타 수정.
- 15. Google지도 API를 사용하여 사용자를 위치로 안내합니다 (Android)
- 16. Google지도 API를 사용하여 물리적 위치를 파악하는 방법
- 17. Google지도 API를 사용하여 CSS 위치 지정
- 18. gwt maps api를 사용하여 Google지도 연결을 사용하십시오
- 19. Google지도 API를 사용하여 역 지오 코딩
- 20. api를 사용하여 mercurial에서 로그 검색
- 21. 여러 API를 사용하여 노래 검색
- 22. Google지도 API를 사용할 때
- 23. iPhone Google지도 API V3 사용자 현재 위치 및 쇼 레스토랑
- 24. Google지도 로컬 서비스 검색
- 25. Google지도 API 검색
- 26. Foursquare 장소 검색/Google지도 검색
- 27. Google지도 API 검색 json 결과
- 28. Google지도 V3 검색 문제
- 29. 검색 사용 방법 : 검색 API를 사용하여 txt 파일을 검색 하시겠습니까?
- 30. Google지도 API를 여러 마커 정보창이
(http://www.whathaveyoutried.com) – josh3736
http://stackoverflow.com/a/33209642/3728916 – ImranNaqvi
이없는 이유는 표시되지 않습니다 유효한 질문뿐 아니라 그 대답도 내 대답. api, 언어는 알려져 있습니다. 이에 대한 직접적인 대답이 있습니다. –