Travel Maker - Google Maps

지도 생성, 마커 추가

 

 

 <div id="map"></div>
 <input id="search-location" type="text" placeholder="장소를 검색하세요">
 
 
 
<script>
    // 지도스크립트 시작
    let map;
    let markers = []; // 여러 개의 마커를 관리하기 위한 배열
    let markerCount = 0; // 마커 숫자를 위한 변수 초기화
    let lastDeletedMarkerCount = 0;

    // 구글 지도 API 스크립트 로딩 후 실행될 콜백 함수입니다.
    function initMap() {
        // 사용자의 위치를 검색할 수 있는 검색 박스를 추가합니다.
        const input = document.getElementById('search-location');
        const searchBox = new google.maps.places.SearchBox(input);

        // 지도 생성 및 설정
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: 37.5,
                lng: 127
            }, // 지도 초기 중심 위치
            zoom: 15
            // 초기 줌 레벨
        });

        // 지도에 검색 박스 추가
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // 검색 결과가 변경되었을 때, 해당 위치로 지도의 중심을 이동하고 마커를 생성합니다.
        searchBox.addListener('places_changed', function () {
            const places = searchBox.getPlaces();

            if (places.length === 0) {
                return;
            }

            // 검색된 첫 번째 위치로 지도의 중심 이동
            map.setCenter(places[0].geometry.location);
            map.setZoom(12); // 지도 줌 레벨 설정
        });
    }
    // 맞춤 HTML 마커를 생성하는 함수
    function createHTMLMarker(position, content) {
        const priceTag = document.createElement("div");
        priceTag.className = "price-tag";
        priceTag.textContent = content;

        const customMarker = new google.maps.Marker(
            {
                position: position,
                map: map,
                icon: {
                    url: 'data:image/svg+xml;charset=UTF-8,'
                        + encodeURIComponent(`<svg width="200" height="200" xmlns="마커 아이콘 url" height="200" width="200" /><text x="2" y="-27" font-size="80" font-weight="bold" text-anchor="middle" alignment-baseline="middle" transform="translate(100, 100)">${content}</text></svg>`),
                    scaledSize: new google.maps.Size(40, 40), // 아이콘 크기를 조정합니다.
                    anchor: new google.maps.Point(15, 15)
                    // 아이콘 중심점을 조정합니다.
                },
                draggable: true
                // 마커를 드래그 가능하도록 설정합니다.
            });

        // 드래그 이벤트 리스너를 추가합니다.
        google.maps.event.addListener(customMarker, 'dragend', function () {
            const position = customMarker.getPosition();
            customMarker.setPosition(position);
        });

        return customMarker;
    }

    function updateHiddenFields() {
        // 각각의 위치 정보를 문자열로 저장합니다.
        const latPositions = markers.map(marker => marker.getPosition().lat()).join(';');
        const lngPositions = markers.map(marker => marker.getPosition().lng()).join(';');

        // 문자열을 숨겨진 필드에 설정합니다.
        document.getElementById('lat-input').value = latPositions;
        document.getElementById('lng-input').value = lngPositions;
    }

    function addMarker() {
        markerCount++; // 마커가 추가될 때마다 숫자를 증가시킵니다.

        // 마지막으로 삭제된 마커의 숫자보다 더 큰 숫자의 마커를 생성합니다.
        if (markerCount <= lastDeletedMarkerCount) {
            markerCount = lastDeletedMarkerCount + 1;
        }

        const center = map.getCenter();
        const marker = createHTMLMarker(center, markerCount.toString());
        markers.push(marker);

        // 위치 정보를 업데이트합니다.
        updateHiddenFields();

    }
    function removeLastMarker() {
        if (markers.length > 0) {
            const lastMarker = markers.pop(); // 배열에서 가장 마지막 요소를 가져옴
            lastMarker.setMap(null); // 가장 최근에 추가된 마커를 지도에서 제거
            lastDeletedMarkerCount = parseInt(lastMarker.getLabel()); // 마지막으로 삭제된 마커의 번호를 기억합니다.
            markerCount--; // 삭제된 마커의 숫자를 감소시킵니다.

            // 위치 정보를 업데이트합니다.
            updateHiddenFields();

        }
    }

</script>

 

 

 

 

저장된 마커 불러와서 지도 생성

 

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


<script>

    let markers = [];
    let markerCount = 0;

    function createHTMLMarker(map, position, content) {
        const customMarker = new google.maps.Marker({
            position: position,
            map: map,
            icon: {
                url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`<svg width="200" height="200" xmlns="마커 아이콘 url" height="200" width="200" /><text x="2" y="-27" font-size="80" font-weight="bold" text-anchor="middle" alignment-baseline="middle" transform="translate(100, 100)">${content}</text></svg>`),
                scaledSize: new google.maps.Size(40, 40),
                anchor: new google.maps.Point(15, 15)
            },
            draggable: false
        });
        return customMarker;
    }

    function initMap() {

        const latPositions = '<%= show_final_consult.getCons_lat() %>'.split(';');
        const lngPositions = '<%= show_final_consult.getCons_lng() %>'.split(';');
        const mapContainer = document.getElementById('map');
        const lat = parseFloat(latPositions[0]);
        const lng = parseFloat(lngPositions[0]);
        console.log(lat);
        const defaultPosition = { lat: lat, lng: lng };

        const map = new google.maps.Map(mapContainer, {
            center: defaultPosition,
            zoom: 15
        });

        for (let j = 0; j < latPositions.length; j++) {
            markerCount++;
            const lat = parseFloat(latPositions[j]);
            const lng = parseFloat(lngPositions[j]);
            const position = { lat: lat, lng: lng };
            const marker = createHTMLMarker(map, position, markerCount.toString());
            markers.push(marker);
        }
        markerCount = 0; // 초기화

    }

    // initMap 함수를 콜백으로 등록
    document.addEventListener('DOMContentLoaded', initMap);
</script>