구글 지도에 표시하는 사진 촬영 위치

워드프레스에 원본 이미지를 업로드할 때 위도와 경도 데이터가 있다면 이미지 메타 데이터로 저장하도록 지난 과정에서 설정하였습니다. 또, 위도와 경도의 GPS 데이터를 십진수 포맷으로 변환하여 저장하도록 처리하였습니다. 이 변환한 GPS 데이터를 싱글 이미지 포스트 페이지에 구글 지도를 사용하여 표시하는 것이 이번 장의 과정입니다.

구글 지도 자바스크립트 API Key

예제의 GPS 데이터를 구글 지도와 연동하기 위해서는 아이프레임^iframe 임베드 방식이 아니라 자바스크립트 API 키를 획득하여 구글에서 제공하는 자바스크립트 소스와 함께 구성해야 합니다. 키를 획득하는 방법 또는 접근 경로는 몇 가지가 있지만, 단순한 목적일 때 제일 쉬운 방법을 찾아 사용하세요. API 키를 획득하는 내용은 다음 포스트로 대체합니다.

구글지도 플랫폼 사용을 위해 카드정보 입력하지 않고 API Key 생성하기

포스트를 참고하여 얻은 키를 복사하여 따로 저장합니다.

구글 지도 자바스크립트 API

다음 소스는 예제에서 위도와 경도를 포함한 하나의 GPS 데이터를 구글 지도에 마커로 출력하기 위한 것으로 구글 지도에서 제공하는 싱글 마커 기본 예시를 사용한 것입니다.

<div id="single_map" style="width:100%; height:200px;"></div>
<script>
function initMap() {
    var pic_location = {lat: 위도, lng: 경도};
    var map = new google.maps.Map(document.getElementById( 'single_map' ), {
        zoom: 6,
        center: pic_location,
        disableDefaultUI: true,
        streetViewControl: true,
        fullscreenControl: true
    });
        var marker = new google.maps.Marker({
        position: pic_location,
        //animation: google.maps.Animation.BOUNCE, // 바운스 효과를 원한다면 활성화
        map: map
    });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?region=KR&key=키&callback=initMap"></script>

19번 줄의 ‘키’ 글자를 조금 전에 얻은 API 키와 대체하면 됩니다. 다음은 필자의 키를 추가한 것인데 각자의 키를 추가해야 합니다.

// 자신의 키를 추가
<script async defer src="https://maps.googleapis.com/maps/api/js?region=KR&key= AIzaSyBPP163EtTD_KdslvocbXMgAi432rQLHq4&callback=initMap"></script>

싱글 이미지의 GPS 데이터

위의 코드 4번 줄에 한글로 표기한 ‘위도’와 ‘경도’ 데이터만 추가하면 사이트에서 마커가 있는 구글 지도를 볼 수 있는데, 현재 예제에서 싱글 이미지의 GPS 데이터를 얻으려면 2가지 방법이 있습니다.

• 싱글 이미지 포스트의 커스텀 필드 ‘_location’의 ‘lat’, ‘lng’ 키 데이터
• 싱글 이미지 포스트의 이미지 메타 데이터 중 ‘latitude’, ‘longitude’ 키 데이터

커스텀 필드에서

커스텀 필드의 데이터는 남위(S), 서경(W)일 때 음수로 처리하여 저장한 데이터이므로 바로 사용할 수 있으며, 다음 코드로 간단하게 위도와 경도를 얻을 수 있습니다.

$gps = get_post_meta( $attach_id, '_location', true );
$lat = $gps['lat']; // 위도
$lng = $gps['lng']; // 경도

이미지 메타 데이터에서

현재 작업 중인 pic-single-side.php 파일에는 다음 코드 1번 줄이 이미 있으므로, 3번 줄에서 8번 줄로 위도와 경도를 얻을 수 있습니다. 3번 줄에서 8번 줄은 지난 과정에서 테마 루트 inc/image-functions.php 파일에 추가한 코드와 같습니다. 싱글 이미지 포스트에서는 다음 코드를 사용하며, 위의 방식은 나중의 과정에서 구성할 ‘발자국’ 페이지에 사용합니다.

$meta = wp_get_attachment_metadata( $attach_id ); // _wp_attachment_metadata 필드 데이터

$latitude = $meta['image_meta']['latitude'];
$latitude_ref = $meta['image_meta']['latitude_ref'];
$longitude = $meta['image_meta']['longitude'];
$longitude_ref = $meta['image_meta']['longitude_ref'];
( $latitude_ref == 'S') ? $lat = -$latitude : $lat = $latitude; // 남위일 때 음의 기호 추가
( $longitude_ref == 'W') ? $lng = -$longitude : $lng = $longitude; // 서경일 때 음의 기호 추가

정리한 최종 코드는 다음과 같습니다.

<?php
if ( array_key_exists( 'latitude', $meta['image_meta'] ) ) {
    $latitude = $meta['image_meta']['latitude'];
    $latitude_ref = $meta['image_meta']['latitude_ref'];
    $longitude = $meta['image_meta']['longitude'];
    $longitude_ref = $meta['image_meta']['longitude_ref'];
    ( $latitude_ref == 'S') ? $lat = -$latitude : $lat = $latitude; // 남위일 때 음의 기호 추가
    ( $longitude_ref == 'W') ? $lng = -$longitude : $lng = $longitude; // 서경일 때 음의 기호 추가
?>
<div id="single_map" style="width:100%; height:200px;"></div>
<script>
function initMap() {
    var pic_location = {lat: <?php echo $lat . ', lng: ' . $lng; ?>};
    var map = new google.maps.Map(document.getElementById( 'single_map' ), {
        zoom: 6,
        center: pic_location,
        disableDefaultUI: true,
        streetViewControl: true,
        fullscreenControl: true
    });
        var marker = new google.maps.Marker({
        position: pic_location,
        //animation: google.maps.Animation.BOUNCE, // 바운스 효과를 원한다면 활성화
        map: map
    });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?region=KR&key=AIzaSyBPP163EtTD_KdslvocbXMgAi432rQLHq4&callback=initMap"></script>
<?php } //싱글 마커 ?>

2번 줄에서 위도에 해당하는 키가 있을 때를 조건으로 두었고, 13번 줄에 위도와 경도를 변수로 추가하였습니다. 위의 코드에서 28번 줄의 키만 자신의 것으로 변경한 후 pic-single-side.php 파일 아래에 이어서 추가하고 저장하면 싱글 이미지 포스트에서 구글 지도와 마커를 볼 수 있습니다.

이번 장에서 변경한 다음의 파일을 다운로드하고 압축을 풀어 테마 루트에 덮어쓴 후 구글 지도 API 키만 자신의 것으로 변경합니다. 그리고 사이트에서 최종 결과를 확인하면 됩니다. 여러 싱글 이미지 포스트를 확인하여 지도와 마커와 출력되는지 확인해보세요.

싱글 이미지 포스트 페이지에서 남은 내용 중 등록자의 등록 이미지 수, 총추천 수, 총다운로드 수, 관련 이미지 포스트 출력은 나중에 다시 작업할 것이며, 다음 장에서는 이미지 포스트 아카이브 출력에 관하여 안내하고 처리합니다. 이미지 포스트 아카이브는 ‘타입 attachment 포스트의 아카이브’입니다.