728x90
구글 맵으로 해당 lat, lng를 받아 올 일이 있어서 구현해봤습니다
<!DOCTYPE html>
<html>
<head>
<title>위치 수정</title>
<style>
body {
margin: 130;
padding: 130;
font-family: Arial, sans-serif;
}
#map {
height: 400px;
width: 100%;
position: relative;
}
#search-container {
top: 10px;
left: 10px;
z-index: 5;
padding: 10px;
border-radius: 5px;
}
#pac-input {
width: 300px;
padding: 5px;
font-size: 16px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvCfkAi5nbQEisY1erpTTxCAEBNeNUWMI&libraries=places&callback=initMap" async defer></script>
</head>
<body>
<h1>{{ place.name }} - 위치 수정</h1>
<h4>주소: {{place.address}} </h4>
<div id="search-container">
<input id="pac-input" type="text" placeholder="주소 검색">
</div>
<div id="map"></div>
<form method="post">
{% csrf_token %}
<label for="lat">위도:</label>
<input type="text" name="lat" id="lat" value="{{ coord.1 }}">
<label for="lng">경도:</label>
<input type="text" name="lng" id="lng" value="{{ coord.0 }}">
<button type="submit">저장</button>
</form>
<script>
var markers = [];
function updateLatLngFields(lat, lng) {
document.getElementById('lat').value = lat;
document.getElementById('lng').value = lng;
}
function initMap() {
var lat = parseFloat(document.getElementById('lat').value) || 37.7749;
var lng = parseFloat(document.getElementById('lng').value) || -122.4194;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: lat, lng: lng}
});
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
draggable: true
});
markers.push(marker);
marker.addListener('dragend', function(event) {
updateLatLngFields(event.latLng.lat(), event.latLng.lng());
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length === 0) {
return;
}
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
draggable: true
});
markers.push(marker);
updateLatLngFields(place.geometry.location.lat(), place.geometry.location.lng());
marker.addListener('dragend', function(event) {
updateLatLngFields(event.latLng.lat(), event.latLng.lng());
});
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
var placeName = "{{ place.name }}";
input.value = placeName;
setTimeout(function() {
var event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
var enterEvent = new KeyboardEvent('keydown', {
bubbles: true,
cancelable: true,
keyCode: 13
});
input.dispatchEvent(enterEvent);
}, 500);
});
}
</script>
</body>
</html>