주소 입력시 좌표로 변환하여 구글API에 마커 나타나게 하는 법

주소 입력시 좌표로 변환하여 구글API에 마커 나타나게 하는 법

QA

주소 입력시 좌표로 변환하여 구글API에 마커 나타나게 하는 법

본문

안녕하세요. 

 

작업중에 궁금한점이 있어 질문을 올립니다. 

 

제목 그대로 주소를 입력했을 때 자동으로 좌표로 변환되어 

 

구글맵에 마커가 표시되도록 하고 싶습니다. 

 

쉽게 이야기하면 구글지도에서 검색을 하면 해당 지점이 나타나는것처럼 ! 

 

현재 구글api로 지도는 불러오는데까진 성공하였습니다. 

 

헌데 주소를 검색하려고 하는데 검색이 되질 않습니다. 

 

어느부분이 문제인지 알려주시면 감사하겠습니다.

 

 

<script src="https://maps.googleapis.com/maps/api/js?key=사용자키&callback=initialize" async defer></script>

    <script type = "text/javascript">

      var map;

      var infowindow = new google.maps.InfoWindow();

      var marker =[];

      var geocoder;

      var geocodemarker = [];

 

 

      var GreenIcon = new google.maps.MarkerImage(

         "http://labs.google.com/ridefinder/images/mm_20_green.png",

         new google.maps.Size(12, 20),

         new google.maps.Point(0, 0),

         new google.maps.Point(6, 20));

      // 녹색 마커 아이콘을 정의하는 부분

 

      function initialize(){

 

      var latlng = new google.maps.LatLng(37.5240220, 126.9265940);

      var myOptions = {

      zoom: 10,

      center:latlng,

      mapTypeId: google.maps.MapTypeId.ROADMAP

      };

      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      geocoder =  new google.maps.Geocoder();

      google.maps.event.addListener(map, 'click', codeCoordinate);

          /*아랫글에서 설명한 event를 이용 지도를 'click'하면 codeCoordinate함수를 실행합니다.

             codeCoordinate함수는 클릭한 지점의 좌표를 가지고 주소를 찾는 함수입니다. */

      }

 

      function Setmarker(latLng) {

          

      if (marker.length > 0)

          {

      marker[0].setMap(null);

      }

      // marker.length는 marker라는 배열의 원소의 개수입니다.

      // 만약 이 개수가 0이 아니라면 marker를 map에 표시되지 않게 합니다.

      // 이는 다른 지점을 클릭할 때 기존의 마커를 제거하기 위함입니다.

 

      marker = [];

      marker.length = 0;

      // marker를 빈 배열로 만들고, marker 배열의 개수를 0개로 만들어 marker 배열을 초기화합니

      // 다.

 

      marker.push(new google.maps.Marker({

      position: latLng,

      map: map

      } ));

      // marker 배열에 새 marker object를 push 함수로 추가합니다.

 

      }

      /*클릭한 지점에 마커를 표시하는 함수입니다.

         그런데 이 함수를 잘 봐야 하는 것이 바로 marker를 생성하지 않고 marker라는 배열 안에 Marker 

         obejct  원소를 계속 추가하고 있습니다. 이는 매번 클릭할 때마다 새로운 마커를 생성하기 위함입니

         다. */

 

      //입력 받은 주소를 지오코딩 요청하고 결과를 마커로 지도에 표시합니다.

      function codeAddress(event) {

 

      if (geocodemarker.length > 0)

      {

      for (var i=0;i<geocodemarker.length ;i++ )

      {

      geocodemarker[i].setMap(null);

      }

      geocodemarker =[];

      geocodemarker.length = 0;

      }

      //이 부분도 위와 같이 주소를 입력할 때 표시되는 marker가 매번 새로 나타나게 하기 위함입니

      //다.

 

      var address = document.getElementById("addr1").value;

      //아래의 주소 입력창에서 받은 정보를 address 변수에 저장합니다.

 

      //지오코딩하는 부분입니다.

      geocoder.geocode( {'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK)  //Geocoding이 성공적이라면,

      {

      alert(results.length + "개의 결과를 찾았습니다.");

      //결과의 개수를 표시하는 창을 띄웁니다. alert 함수는 알림창 함수입니다.

      for(var i=0;i<results.length;i++)

      {

      map.setCenter(results[i].geometry.location);

      geocodemarker.push(new google.maps.Marker({

      center: results[i].geometry.location,

      position: results[i].geometry.location,

      icon: GreenIcon,

      map: map

      }));

      } 

      //결과가 여러 개일 수 있기 때문에 모든 결과를 지도에 marker에 표시합니다.

      }

      else

      { alert("Geocode was not successful for the following reason: " + status); 

      }

      });

      }

 

 

      //클릭 이벤트 발생 시 그 좌표를 주소로 변환하는 함수입니다.

      function codeCoordinate(event) {

           

      Setmarker(event.latLng);

      //이벤트 발생 시 그 좌표에 마커를 생성합니다.

 

      // 좌표를 받아 reverse geocoding(좌표를 주소로 바꾸기)를 실행합니다.

      geocoder.geocode({'latLng' : event.latLng}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK)  {

      if (results[1])

      {

      infowindow.setContent(results[1].formatted_address);

      infowindow.open(map,marker[0]);

      //infowindow로 주소를 표시합니다.

      }

      }

      });

      }

      //

      </script>

 

     <div id="map_canvas" style="width:500px; height:200px;"></div>

     <p> 주소 : <input type="text" size="100" id="addr1" name="address"/>

          <input name="submit" type="submit" value="Search" onclick='codeAddress(); return false;' /> </p>

이 질문에 댓글 쓰기 :

답변 1

 var latlng = new google.maps.LatLng(37.5240220, 126.9265940); 

 

이부분이 좌표인데 구글 api 보시면 주소 검색으로해서 좌표 바로 뽑아주는기능있어요

 

그부분 소스 보셔서 좌표 받아서 위에 소스 부분에 같이 넣어주셔야 해요

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT