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

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

QA

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

답변 1

본문

안녕하세요. 

 

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

 

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

 

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

 

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

 

현재 구글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 보시면 주소 검색으로해서 좌표 바로 뽑아주는기능있어요

 

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

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 83
© SIRSOFT
현재 페이지 제일 처음으로