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

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

워드프레스에 원본 이미지를 업로드할 때 위도와 경도 데이터가 있다면 이미지 메타 데이터로 저장하도록 지난 과정에서 설정하였습니다. 또, 위도와 경도의 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 키만 자신의 것으로 변경합니다. 그리고 사이트에서 최종 결과를 확인하면 됩니다. 여러 싱글 이미지 포스트를 확인하여 지도와 마커와 출력되는지 확인해보세요.

워드프레스 5 - 매물의 추억

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

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

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

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어

Leave a Reply