구글 Map lat, lng

프론트/snippet

구글 Map lat, lng - html

두잇 두두 2024. 7. 24. 13:48

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>

저작자표시 비영리