채택완료

구글 지도 api 좌표값 질문입니다.

2017-02-23 (목) 10:37:52 6,453

<input id="pac-input" class="controls" type="text" placeholder="Enter a location">

<div id="map"></div>

<script> 

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {

    center: {lat: -33.8688, lng: 151.2195},

    zoom: 13

  });

  var input = document.getElementById('pac-input');

  var autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.bindTo('bounds', map);

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

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

  var marker = new google.maps.Marker({

    map: map

  });

  marker.addListener('click', function() {

    infowindow.open(map, marker);

  });

  autocomplete.addListener('place_changed', function() {

    infowindow.close();

    var place = autocomplete.getPlace();

    if (!place.geometry) {

      return;

    }

    if (place.geometry.viewport) {

      map.fitBounds(place.geometry.viewport);

    } else {

      map.setCenter(place.geometry.location);

      map.setZoom(17);

    }

    // Set the position of the marker using the place ID and location.

    marker.setPlace({

      placeId: place.place_id,

      location: place.geometry.location

    });

    marker.setVisible(true);

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +

        'Place ID: ' + place.place_id + '<br>' +

        place.formatted_address);

    infowindow.open(map, marker);

  });

}

</script>

소스코드입니다..

글쓰기시 주소검색해서 마크가 찍히면

db에 좌표값을 넣어서 상세페이지에서 출력을 시키고싶은데..

구글에서 제공하는 소스를 잘붙혀서 검색하여 마크가 찍히는것까지는 성공하였습니다..

그다음부터 어떻게해야할지 모르겠습니다....

어떻게해야할까요.. 답변부탁드립니다..

답변 1개 / 댓글 2개

채택된 답변
+20 포인트

주소 검색을 한 뒤에 그 마크를 클릭했을 때 db에 저장하는 페이지를 하나 만드셔야 할거 같네요

ajax 이용해서 저장하는방식이 간편해 보일거 같아요

답변에 대한 댓글 2개

관심 감사합니다.. 스크립트에서 어느부분에서 아작스로 어떻게 시작해야할지 손도못대겠네요..ㅜㅠㅜ
큰일났네요..흐아ㅜㅜ
아마 주소 api 부분에서 클릭시 이벤트가 있을겁니다
그 이벤트 안에 ajax를 넣으시면 될거 같아요

답변을 작성하려면 로그인이 필요합니다.