01. Qt & google API 연동

0. 주의 사항

VMware에서 Ubuntu 사용하는 경우

VM 설정 → Display → Accelerate 3D Graphics 해제 (테스트 후 필요 시 다시 켜기)
로그인 화면의 톱니/기어에서 “Ubuntu on Xorg”로 로그인(Wayland 대신)

구글 등록에 사용할 개인 신용카드 필요

1. Google Maps Platform / API & MapID 세팅

*절대 외부로 공개하지 않는다.

2. Google Map 웹페이지 테스트

1. vscode 에서, map.html 파일을 생성하고, 아래 html 파일을 만들어주세요.

- 자신의 API key 값을 입력해주세요

- 자신의 Map ID 를 입력해주세요

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

<style>html,body,#map{height:100vh;margin:0}</style>

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

  <script>
    let map, marker;

    // 최신 권장: importLibrary + AdvancedMarkerElement
    async function initMap() {
      const { Map } = await google.maps.importLibrary("maps");
      const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

      const center = { lat: 37.5665, lng: 126.9780 };

      map = new Map(document.getElementById("map"), {
        center,
        zoom: 12,
        mapId: "본인의 Map ID를 입력하세요"     // Google Cloud에서 만든 Web Map ID
      });

      marker = new AdvancedMarkerElement({
        map,
        position: center,
        title: "Seoul",
      });
    }

    // Qt에서 좌표값을 넘겨 호출: page()->runJavaScript("setCenter(lat,lng)")
    function setCenter(lat, lng) {
      if (!map) return;
      const p = { lat: Number(lat), lng: Number(lng) };
      map.setCenter(p);
      if (marker) marker.position = p;
    }
  </script>

  <!-- 스크립트는 '한 개'만, loading=async + callback=initMap -->
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=본인의 Map API KEY를 입력하세요&v=weekly&loading=async&callback=initMap">  // Google Cloud에서 만든 Map API KEY
  </script>
</body>
</html>

2. 만들어진 html 코드를 더블클릭하면, 웹 브라우저에서 실행 확인 가능합니다.

3. 간단한 웹 서버 동작시키기

1. html 파일을 생성한 경로에서 http.server 를 실행합니다.

python3 -m http.server 8000

2. 웹 브라우저에서를 실행하고, "localhost + 웹페이지" 주소로 호출합니다.

http://127.0.0.1:8000/map3.html

3. 예시에서 보았듯 웹 브라우저를 이용하면 Google 지도(Maps)를 손쉽게 사용할 수 있습니다.

Qt에서는 WebEngine 모듈을 통해 애플리케이션의 일부를 브라우저처럼 활용할 수 있으므로,

브라우저에 표시되는 지도를 그대로 앱 내부에 임베드하여 표시할 수 있습니다.

4. Qt Webengin 모듈 추가 설치

1. qt maintenance tool을 미러사이트 설정과 함께 실행합니다.

/home/basic/Qt/MaintenanceTool --mirror http://ftp.jaist.ac.jp/pub/qtproject/

2. 추가 모듈을 선택 설치한다.

web 키워드로 검색한다.
Extensions - Qt WebEngine - Qt Version 으로 선택한다.
Qt - Additional Libraries - Qt Web 관련 라이브러리를 선택한다.

4. Qt 실행파일

1. 소스파일

mapEx06.zip

0.01MB

리소스 파일의 html 코드 내부에, API key, MapID 를 입력해야 합니다.

2. 실행 결과

3. 비교

항목	load(QUrl("http://127.0.0.1:8000/map.html"))	setHtml(html, QUrl("http://127.0.0.1/app/"))
로컬 서버 필요	있음(파일 변경 자동 반영)	없음(qrc/리소스 파일)
HTML 소스	http://127.0.0.1:8000/map3.html 를 네트워크로 가져옴 (서버에서 받아옴)	qrc 리소스 파일에서 읽은 문자열을 즉시 렌더
Referrer 헤더	http://127.0.0.1:8000/map.html	http://127.0.0.1/app/ (baseUrl)
	개발 중 빠르게 수정, 변경 확인	배포/단일 실행파일 (내용 바꾸려면 다시 setHtml))
	두 방식 모두 Maps 스크립트는 한 번만(중복 include 금지), loading=async 사용

4. Qt 에서 좌표 입력 >> map html 코드에 반영 되어 위치 변경

위와 같 방법으로

google.maps.Map 생성자를 사용하여 지도를 초기화하고,
google.maps.Marker를 사용하여 마커를 추가하며,
google.maps.DirectionsService를 사용하여 길찾기 기능을 사용합니다.
장소 검색은 google.maps.places.PlacesService를 사용합니다.

시작하기 | Maps JavaScript API | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 의견 보내기 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 플랫폼 선택: Android iOS JavaScript

developers.google.com

01. Qt & google API 연동

댓글

이 글 공유하기

티스토리툴바

댓글

이 글 공유하기

다른 글

티스토리툴바