회원가입 구글맵 좌표 넣는 방법과 자동 게시글 등록 문의드립니다.
본문
2가지 기능을 구현하려고 하고 있습니다.
회원가입시 구글맵 좌표를 넣는 방법과 넣은 좌표를 바탕으로 게시글 자동 등록을 하고자 합니다.
여분필드 사용법과 구글맵 사용키 등은 얻어왔는데 구글맵 켜서 좌표를 여분필드에 넣고 회원가입 완료되면 자동으로 특정 테이블에 게시글 넣는 방법을 모르겠습니다.
답변 1
선택된 좌표를 텍스트 박스에 넣어주고
해당 텍스트 박스를 포함한 폼 서브밋시 회원 여분필드 적당한 곳에 넣으면 될것같고
자동 게시글이 게시판 타입이면
https://github.com/gnuboard/gnuboard5/blob/master/bbs/write_update.php#L259
참조하시면 될것 같습니다.
구글 선택한 좌표를 어떻게 넣을까요?
구글 좌표 처음 써봐서 화면에 나타내는것은 가능한데 좌표 구하는 것이랑 넣는것은 어떻게 해야하는지 해매고 있습니다.
참고할 만한 코드나 링크가 있을까요?
https://developers.google.com/maps/documentation/javascript/examples/event-click-latlng
위와 같은 기능이 필요한데 클릭 후 해당 값을 input text에 어떻게 넣을지 모르겠습니다....
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Event Click LatLng</title>
<style>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
/*height: 100%;*/
height: 80%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
<script>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
function initMap() {
const myLatlng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatlng,
});
// Create the initial InfoWindow.
let infoWindow = new google.maps.InfoWindow({
content: "Click the map to get Lat/Lng!",
position: myLatlng,
});
infoWindow.open(map);
// Configure the click listener.
map.addListener("click", (mapsMouseEvent) => {
// Close the current InfoWindow.
infoWindow.close();
// Create a new InfoWindow.
infoWindow = new google.maps.InfoWindow({
position: mapsMouseEvent.latLng,
});
infoWindow.setContent(
JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)
);
infoWindow.open(map);
document.getElementById('lat').value = mapsMouseEvent.latLng.lat();
document.getElementById('lng').value = mapsMouseEvent.latLng.lng();
});
}
window.initMap = initMap;
</script>
</head>
<body>
lat: <input type="text" id="lat" />
lng: <input type="text" id="lng" />
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
감사합니다. 참고 후 해결하였습니다.
답변을 작성하시기 전에 로그인 해주세요.
