My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 21294 추천 수 0 댓글 26
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

간만에 구글 API를 보던 중 재미난 샘플이 있어서 살짝 들여다 봤습니다.. 맛만..;;

화면 ui 및 기능 정리가 잘되어있어서 활용 범위가 클것같습니다.

Google Places 대신 자체 디비를 사용해서 쓰게되도 멋질것 같다는 생각이 듭니다.

( 메인은 Google Places 인데...어째 딴 생각이 드네요.)



아직 자세히 보지는 못해서 조만간 뜯어보고 싶네요.

복합적인 기능이다 보니 좀 단순화시켜서 개별 샘플화 하기!!

당장 하고 싶지만 일은 해야 하니까요 ㅠㅠ


보면 볼수록 구글의 방대한 데이터는..후덜덜하네요


Test Url : http://www.uhoon.co.kr/test/2253.html


대략 적인 기능은 


지역명 자동완성 기능 - Autocomplete

좌표 이동시 getBounds() 를 이용하여 화면내에 위치한 마커만 표시

PlacesService 로 지역정보 검색 등등.....   



이미지 1.png

 

API Url : https://developers.google.com/places/?hl=ko

참고 Url : https://developers.google.com/maps/documentation/javascript/examples/place-search?hl=ko



2014.06.06 추가 내용 :

기본 검색에 대해서 

 : https://developers.google.com/places/documentation/search?hl=ko 

검색키워드는... 

 : https://developers.google.com/places/documentation/supported_types?hl=ko

?
  • ?
    윤윤 2014.03.26 19:26

    구글 MAP API 를 이용하여 현재위치를 찾고 PLACE API를 이용하여 가장 가까운 위치의 병원도 찾을수 있을까요?

  • ?
    kay 2014.03.27 09:53

    요 샘플에서 병원 검색이 가능하구요.

    대신에 기본 좌표나 위치를 검색하는 대신 현재 위치 좌료를 이용하시면 가능합니다.


    현재 위치 정보 읽어오는 방법은 http://www.uhoon.co.kr/GoogleAPI/716 참고하시면 되실것같습니다.

    가장 가까운 병원이면..리턴 받은 위경도 값들중에 거리 계산으로 가장 가까운 1개만 처리하는등으로..


    두 좌표(위경도)로  거리 구하는것은 구글링 결과가 많습니다.. 

    산수를 못해서...직접 도움을 드리긴 어렵네요.

    검색해보니..Javascript  함수로 만들어주신분이 계셔서 링크 남깁니다. ( http://hmjkor.tistory.com/256  )


    -----


    병원 위경도 디비도 찾아보면 있을듯한데요. 디비에서 비교 검색하시는것도 추천드립니다.

    ( 호텔 검색 사이트 개발자로 일하고 있는데요.. 위경도 디비 구성해놓고 디비에서 거리비교해서 사용하고 있습니다. )


    재미난걸 만드시는 모양이네요 ^^

    즐프하세요~

  • ?
    개발하자! 2014.06.06 18:12

    주변검색을 할때 다양한 것들을 추가하고 싶어서 cafe나 park같은것은 검색어도 되는데

    영화관을 추가하고싶은데 movie나 theater등을 해봐도 영화관은 뜨지가 않아서 질문드리는데

    검색어 키워드가 따로 있는것인지 아니면 이것을 한글로 바꿀수 있는지 알고 싶어서 질문드립니다~


  • ?
    kay 2014.06.08 10:28

    메일로 답변 드렸습니다.

    도움이 되셨길 바랍니다.^^

  • ?
    이용재 2014.07.09 12:00

    현재 구글 api 연계하여 GPS이용 내 주변에 충남지역 착한가격업소를 보여지게 하는걸 기획중에 있습니다.
    비슷한걸 찾다보니 우연히 들어오게 되었는데요.
    GPS연동하는 소스는 찾았고 이제 주변에 착한가격업소만 뿌려주면되는데요..
    예제로 제공해주신 소스를 이용해서 가능할까요...

  • ?
    kay 2014.07.10 09:24

    이용재님 

    요 샘플은 기존에 구글에서 제공하는 데이터 기반의 샘플이라 말씀하신 착한가격업소에 대한 정보가 없기 때문에

    직접적인 적용은 어려우실것같습니다.


    아래 게시물을 참고하셔서 기본 위치를 GPS 위치로 하고 보유하신 데이터로 마커를 생성해주시면 가능하실것 같습니다.


    http://www.uhoon.co.kr/GoogleAPI/613


    작은 도움이지만 필요하시다면 언제든 메일 주세요 ^^;;

  • ?
    이용재 2014.07.17 14:05

    답변 정말 감사합니다.!

    아직 초보수준이라서.. 소스는 대충 파악이 되나..활용을 잘 못하겠어요...

    http://www.uhoon.co.kr/test/716.html 이쪽에 올려주신 소스중 어느부분이 GPS 연동 역활을 하는지 잘 모르겠습니다.
    실례가 안된다면 가르쳐 주실 수 있으신지요..

  • ?
    kty5767 2014.10.05 16:15

    궁금한게 있습니다.  저렇게 구글 API에서 제공하는 장소말고.....  제가 임의로 기준을 잡고,  제 데이터 안에서 검색할 수 있는 기능은 없는 건지요...? ㅠㅠ  진짜 필요한데 몬하겠습니다


    ex) JSON파일에 제가 설정한 위도,경도, 위치정보가 있고   구글맵에 기준을 서울대학교로 잡았다면,  JSON파일 내에 1공학관, 2공학관, 3공학관이 서울대학교에 마커로 찍힐 것입니다. 

    그다음 제가 설정한 마커 안에서 텍스트로 검색을 하는 기능입니다.


    혹시 보신다면 kty5767@naver.com 로 답변 주시면 정말정말 고맙곘습니다 ㅠㅠ

  • ?
    kay 2014.10.05 16:24

    http://www.uhoon.co.kr/GoogleAPI/3401
    json을 이용한 디비검색 마커 표시 샘플입니다

    아마 찾으시는게 요런 기능이 아니실런지요
    굳이 구글플레이스 api를 이용하지 않으셔도..
    사실 플레이스 api는 구글내 지역정보를 이용하는거라
    정해진 업종이나 지정된 키워드가 아니면 검색이 되지않습니다.

    뽐뿌 쪽지로도 보냈습니다.^^

  • ?
    seongjun0926 2014.10.16 12:43

    안녕하세요 안드로이드 앱 개발중에 보게되서 댓글 담겨드립니다. 

    현재 위치에서 주변의 음식점을 나타내고 싶은데 어떻게 해야하는지 관련 예제 소스가있다면

    seongjun0926@naver.com

    부탁드리겠습니다.

  • ?
    kay 2014.10.16 18:13

    자체 디비를 이용하신다면 ..

    http://www.uhoon.co.kr/GoogleAPI/3401

    음식점 디비를 갖고 계시다면 샘플을 이용하시는게 좋을듯합니다.

    보유하신 음식점 디비를 활용하여 

    샘플코드에 http://www.uhoon.co.kr/test/3300/3300.js 와 같이 Json 포멧으로 return 해주시면 됩니다.


    위 샘플에 포함된 기능입니다.

    -현재 위치 가져오기 " Geocoder "

    -동적 마커 생성.

    -말풍선


    구글 Places DB를 이용하신다면 

    예제에도 포함되어있듯이 레스토랑 키워드를 이용하시면 되시구요.

  • ?
    joykim 2014.11.21 15:22

    안녕하세요 안드로이드로 개발을 하고있는 초보 개발자입니다.

    위의 구글 맵 플레이스를 이용하여 위와같이 안드로이드에서 내용을 추고하고싶은데요,

    관련 예제 소스나, 튜토리얼 사이트 혹시 알려주실수 있나요?

  • ?
    kay 2014.11.24 15:02

    안녕하세요.

    몇일 프로젝트 진행하느라 오랜만에 블로그에 왔습니다.

    본문에 API 페이지를 참고하시면 될듯합니다.

    구글 플레이스의 경우 자체 디비 사용이 불가하므로 이점 참고하세요~

  • ?
    너무 궁금합니다. 2014.12.02 22:18

    안녕하세요?

    제가 어플을 제작 하고 있는데 너무너무 궁금 한게 있어서 문의드립니다.

    1. 구글 API 대로 하면 마커에 하이퍼 링크가 안걸려 있는데 해당 장소에 하이퍼 링크를 선택하면 그 상세페이지로 가는게 알고 싶습니다.

    2. 그리고 장소를 글로 뽑을 수 있는지 궁금합니다.

     ㅠㅠ yeop9657@naver.com

  • ?
    kay 2014.12.09 09:36

    늦게나마 댓글 보고 답변 드립니다.


    1. InfoWindow 라는 객체가 있습니다. 말풍선이구요 

    https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ko

    위 링크를 보시면 말풍선에 대한정리가 되어있습니다. 컨텐츠에는 html 코드 및 일반 텍스트를 넣을 수 있습니다.


    2. 참고 하실만한 링크 입니다. 샘플 소스 부분과 함께 아래 링크를 보시면 이해가 빠르실 겁니다.

    https://developers.google.com/maps/documentation/javascript/reference?hl=ko#Autocomplete 

    위 레퍼런스의 getPlace() 의 리턴값을 보시면 어떤 형태로 데이터가 오는지 보실 수 있습니다.   (이름 사진 등등...여러 정보가 오네요.)

    실제로 노출 되는 부분에 대한 코드는 샘플코드 소스의 showSelectedPlace 함수를 보시면 됩니다.

  • ?
    마이핑키 2015.03.11 18:09

    내 주변 지하철역 검색하는 것을 만들고 있는데 지역정보검색을 보니 subway_station으로 types을 하면 될 것 같아서 했는데 안되네요.

    테스트는 웹에서 했고

    https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=37.53958622,37.53958622&radius=5000&types=subway_station&sensor=false&key=키값

    이중 location는 gps로 제 위치값 받아서 넣었고 key값도 google console에서 생성해서 받았는데 결과값이 없다고 하네요.

    제 위치에서 5km(5000) 내에 지하철역만 6군데가 되는터라 흠......

  • ?
    kay 2015.03.15 08:27

    호출하신 Url 이나 파라미터상에 특별한 문제는 없어보여서 보유한 키로 호출해보았습니다.


    정상적으로 한두번 오더니 

    만료 된 키값이라는둥. 

    억세스 디나인이라는둥..;; 


    문제가 있어보이네요..잘못 날린것일수도 있는데

    확인되는대로 재 댓글 달도록 하겠습니다..ㅠㅠ

  • ?
    마이핑키 2015.04.22 22:54

    https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=37.53958622,37.53958622&radius=5000&types=subway_station&sensor=false&key=키값 했는데 name이나 vicinity가 다 영문으로 나오네요.

    혹시 한글로 나올 수 있는 방법 없나요? 검색해보니 language=korean 하면 된다고 하는데 웹에서는 상관없이 한글로 나오는데 android 폰에서는 영문으로 나옵니다.

  • ?
    woong103 2015.05.03 15:01

    안녕하세요 안드로이드를 공부중인 학생입니다.. 현재 구글맵 API를 이용하여 맵과 현재위치 찾기는 구현해 놓은 상태인데요... 작성자 분 처럼 Places api 까지 연동해서 병원 위치와 정보를 받아오고 싶은데 조언 좀 부탁드립니다 ㅠㅠ 초보라 너무 막막하네요....

  • ?
    kay 2015.05.06 09:04

    search() 함수를 보시면 됩니다.

    차근차근 하나씩 풀어가시면 도움이 되실듯합니다.

    places.search를 호출해서 데이터를 받아온 다음 기본 마커생성과 마찬가지로 뿌려줍니다.

  • ?
    rhal107 2015.06.05 23:51
    주소 값$get_addr 를 받아서 바로 보여주고싶은데...
    이렇게 하면될줄알았는데 안되네요 실례가 안된다면 좀갈켜주세요... ㅜㅜ

    function initialize() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {address:'$get_addr'}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    //var latLng = results[0].geometry.location;
    var lat = results[0].geometry.location.lat();
    var lng = results[0].geometry.location.lng();
    }
    });

    var myLatlng = new google.maps.LatLng('lat', 'lng');
    var myOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    .
    .
    .
  • ?
    kay 2015.06.17 08:42

    오랜만에 블로그에 접속을 해가지고....이제서야 확인하고 적습니다.  T^T

    변수 사용법과 위치가 수정이 필요한것같습니다.


    initialize 함수를 아래와 같이 해보심이..

    function initialize() {
    			var geocoder = new google.maps.Geocoder();
                var address = '부산역';
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        //var latLng = results[0].geometry.location;
                        var lat = results[0].geometry.location.lat();
                        var lng = results[0].geometry.location.lng();
    					var myLatlng = new google.maps.LatLng(lat, lng);
    
    					var myOptions = {
    						zoom: 14,
    						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);
    					autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
    					google.maps.event.addListener(autocomplete, 'place_changed', function () {
    						showSelectedPlace();
    					});
                    }
                });
    		}
  • ?
    ㅠㅠㅠ 2018.05.27 22:46
    혹시 구글에서 places 에대한 api 키를따로 받아서 적용하는데 적용이 안되서 그런데 <script src="https://maps.googleapis.com/maps/api/js?key=my key&libraries=places&callback=initMap"
    async defer></script> 이런식이 아닌 다른방법인가요?
  • ?
    kay 2018.06.05 13:54
    https://developers.google.com/maps/documentation/javascript/examples/place-search?hl=ko  를 보면  아래와 같이 정의하고 있습니다.

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">



  • ?
    감탄 2018.09.07 23:05
    혹시 메세지 가능하신가요
  • ?
    kay 2018.10.08 17:04

    많이 늦었지만...상단과 하단에 이메일 주소가 있습니다.


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
20 map 구글맵 v3 infoBox file kay 2015.12.29 2932
19 map 구글맵 v3 단순 다중 마커 (배열이용) 2 file kay 2015.12.28 10249
18 map 구글맵 마커 + 말풍선 - v3 2 file kay 2015.02.05 3275
17 map 구글맵 v3 맵상에 보여지는 마커만 생성하기 5 file kay 2014.08.04 7594
16 map 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 24 file kay 2014.07.17 16905
15 기타 Google 웹사이트 번역기 2 file kay 2014.04.21 5316
» map Google Places API를 이용한 주변 지역 정보 검색 26 file kay 2013.10.18 21294
13 map GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 " 2 file kay 2013.08.28 5240
12 map 구글맵 API 적용범위 (Google Maps API Coverage) kay 2013.08.27 4974
11 map google 스트릿뷰 "Street View" file kay 2013.08.27 4704
10 map 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) file kay 2013.05.31 24273
9 map 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 13 file kay 2013.05.03 28986
8 map 모바일 웹 - 위치정보(GPS) + 마커 + 카톡 + 카스 연동 file kay 2013.04.24 10239
7 map 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 file kay 2013.04.22 14702
6 map geocode - 주소로 위경도 검색 v3 file kay 2013.04.21 8047
5 map 구글맵 마커 + 말풍선 - v2 kay 2013.02.06 10978
4 map geocode - 구글 맵 위경도 검색 v2 kay 2013.02.06 7295
3 Graph 막대 그래프 kay 2013.02.06 8496
2 Graph 선 + 막대 그래프 kay 2013.02.06 8653
1 Graph 선 그래프 file kay 2013.02.06 6296
Board Pagination Prev 1 Next
/ 1