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

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

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

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

예제의 GPS 데이터를 구글 지도와 연동하기 위해서는 아이프레임iframe 임베드 방식이 아니라 자바스크립트 API Key를 획득하여 구글에서 제공하는 자바스크립트 소스와 함께 구성해야 합니다. 키Key를 획득하는 방법 또는 접근 경로는 몇 가지가 있지만, 처음 경험하는 사용자는 어려울 수 있으므로 다음처럼 대체로 간단하고 쉬운 방법을 안내합니다.

먼저, 다음 링크를 클릭하여 구글 지도 API 웹서비스 페이지에 접속합니다.

Google Maps JavaScript API

다음 그림에 나오는 ‘키 가져오기’ 버튼을 찾아 클릭합니다.

구글 지도 자바스크립트 키 가져오기 버튼

구글 서비스에 로그인 전이라면 로그인합니다. 만약, 구글 계정이 없다면 구글 계정(Gmail 계정)을 획득해야 합니다.

버튼을 클릭하면 다음 그림이 나오는데, 그림에서 ‘My Project’ 글자는 구글에 등록한 프로젝트가 하나도 없을 때 나옵니다. 한 개 이상이라면 ‘선택 또는 추가’ 뜻의 안내가 나옵니다.

구글 지도 자바스크립트 API 프로젝트

예제를 위해서 사용하는 프로젝트이므로 필자는 ‘My Project’를 지우고 ‘Local-WordPress’를 입력하였습니다. 이름은 예제 결과에 영향이 없으므로 원하는 이름을 입력하세요. 그리고 ‘CREATE AND ENABLE API’ 버튼을 클릭하면, 다음 그림처럼 키를 바로 얻을 수 있습니다.

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

키를 복사하여 따로 저장합니다.

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

위의 그림에서 ‘API Console’ 링크를 클릭하면 프로젝트에 관한 몇 가지 설정이 가능한 페이지로 이동하며, 획득한 키 사용 제한도 설정할 수 있습니다. 키는 사이트에서 누구나 볼 수 있으므로 사이트에서만 사용하도록 제한하는 것이 좋지만, ‘로컬’ 환경에서 구성하는 예제이므로 관련 설정은 생략합니다. 가능하다면 예제 완성한 후 해당 프로젝트와 키를 삭제하세요.

구글 지도 자바스크립트 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 포스트의 아카이브’입니다.

예제 목차

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 인증과 제한 및 제어

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.