티스토리 뷰


↑ 전에 올렸던 글이다.


   위치를 검색할 때, 위도와 경도로 찾게 되면 항상 미국 구글맵에 들어가서 위치를 검색한 다음에 위도와 경도를 알아내서 직접 기입해야 하는 수밖에 없는데... 이번 글에서는 그런 불편을 없애기 위해 위도/경도가 아닌 주소로 바로 검색하는 방법을 사용하려 한다.


   이 방법을 찾게 된 이유는 DB에 있는 수 십개의 업체들을 웹상에 지도로 표시해야 하는데 위도/경도 컬럼을 만들어서 일일히 업데이트 하는 게 지옥이었기 때문이다. 그래서 주소 컬럼을 이용해서 업체의 주소를 가져와 바로 검색할 수 있는 방법을 찾게 됐다. 구글맵API에서는 이걸 지오코딩이라고 부른다.


   전에도 말했지만 방법은 어렵지 않다.





※ 참고한 곳 

https://developers.google.com/maps/documentation/javascript/geocoding?hl=ko

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


   참고했던 사이트를 보면, 구글에서는 주소 검색을 사용자가 직접 입력해 검색하는 방식으로 예제를 보여주는데, 아래 내가 한 방식은 미리 주소를 코딩해놓는 방식이다.





먼저 html doctype을 <!DOCTYPE html>로 변경해준 다음,

head 부분에

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

추가해준다.


그리고..

↓ head에 삽입




↓body 안에 삽입


끝~!



알아서 변형해서 쓰시길..



저작자 표시 비영리 변경 금지
신고
댓글
  • 오길호 감사합니다~~ 2013.09.06 15:23 신고
  • BlogIcon 공부하는 나부랭이, 무중력고기 도움이 되셨길 바랍니다. 2013.09.07 10:23 신고
  • 도망자 구현할 시간이 모잘랐는대 잘 만들어진 소스보고 조금씩 변경해서 사용했는대 정말 감사합니다~ 2014.01.20 16:35 신고
  • BlogIcon 공부하는 나부랭이, 무중력고기 도움이 되셨다니 다행입니다. 2014.01.20 20:45 신고
  • BlogIcon 정창용 적용해봤는데 원하는 모습이 보이지 않네요. 어흑
    1. 마커도 안찍히고
    2. 위치도 한밭도서관과는 거리가 많이 먼곳이 지도로 표시되는군요.
    테스트주소 http://www.happyjung.com/sample/google_maps_geocoder.html
    2014.12.22 13:23 신고
  • BlogIcon 공부하는 나부랭이, 무중력고기 예전에 됐던 게 안되는 걸 보면 API가 바뀐 것 같은데,
    Google Maps Javascript API를 확인해보시는 게 나을 것 같습니다.
    2014.12.30 10:03 신고
  • 넘어려워요 정말 도움이 많이되는 게시글 감사합니다.
    제가 이걸 이용해서 검색이 되게 하고 싶어서 코드를 바꿔봤는데요,
    안되더라구요... 어디가 어떻게 잘 못된건가요??
    그냥 input text 박스에 입력후 button을 누르면 실행이 되게 하고 싶어요...
    도와주세요...부디...
    제가 완전 초보라 너무 어렵네요...

    <SCRIPT type=text/javascript>

    $('addr1').click(function() {
    // 이벤트 핸들러

    function initialize() {

    var mapOptions = {
    zoom: 18, // 지도를 띄웠을 때의 줌 크기
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map = new google.maps.Map(document.getElementById("map-canvas"), // div의 id과 값이 같아야 함. "map-canvas"
    mapOptions);

    var size_x = 40; // 마커로 사용할 이미지의 가로 크기
    var size_y = 40; // 마커로 사용할 이미지의 세로 크기

    // 마커로 사용할 이미지 주소
    var image = new google.maps.MarkerImage( '주소 여기에 기입!',
    new google.maps.Size(size_x, size_y),
    '',
    '',
    new google.maps.Size(size_x, size_y));

    // Geocoding *****************************************************
    var address = '#addr'; // DB에서 주소 가져와서 검색하거나 왼쪽과 같이 주소를 바로 코딩.
    var marker = null;
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    marker = new google.maps.Marker({
    map: map,
    icon: image, // 마커로 사용할 이미지(변수)
    title: '#addr', // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
    position: results[0].geometry.location
    });

    var content = "한밭도서관<br/><br/>Tel: 042-580-4114"; // 말풍선 안에 들어갈 내용

    // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
    var infowindow = new google.maps.InfoWindow({ content: content});
    google.maps.event.addListener(marker, "click", function() {infowindow.open(map,marker);});
    } else {
    alert("Geocode was not successful for the following reason: " + status);
    }
    });
    // Geocoding // *****************************************************

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

    });
    </SCRIPT>
    </head>
    <body>
    <input type="text" id="addr" size='30'
    <input type="button" id="addr1" value="검색"/>

    <DIV style="WIDTH: 600px; HEIGHT: 340px" id=map-canvas title="도서관 위치입니다."></DIV>

    </body>
    </html>
    2016.01.02 19:02 신고
  • BlogIcon 공부하는 나부랭이, 무중력고기 넘어려워님의 코드를 살펴볼 여력이 없어서 잘 모르겠습니다만, 아마도 구글 API가 좀 바뀐 게 아닌가 싶습니다. 직접 구글에 있는 예제로 한번 해보세요. 2016.01.04 09:07 신고
  • 권영민 음...지오코딩으로 주소 2개를 한꺼번에 보여줄수는없나요....? 주소2개를 한번에... 2017.08.15 20:20 신고
  • 11 공개 포스팅은 안하시는게 좋을거 같네요. 님 말씀대로 api가 바뀌어서 이 코드 이제 에러 납니다. 2017.09.20 08:59 신고
댓글쓰기 폼
Total
874,652
Today
56
Yesterday
773
«   2017/11   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
글 보관함