HTML, CSS, JavaScript 코드를 사용하여 웹페이지에 Google 지도를 추가할 수 있습니다. 이 페이지에서는 웹페이지에 지도를 추가한 다음 프로그래매틱 방식으로 지도 인스턴스에 액세스하는 방법을 설명합니다.
개요
지도를 로드하려면 웹페이지에서 다음 작업을 실행해야 합니다.
- 부트스트랩 로더를 사용하여 Maps JavaScript API를 로드합니다. API 키가 전달되는 위치입니다. HTML 또는 JavaScript 소스 파일에 추가할 수 있습니다.
- HTML 페이지에 지도를 추가하고 필요한 CSS 스타일을 추가합니다.
maps라이브러리를 로드하고 지도를 초기화합니다.
gmp-map 요소를 사용하여 지도 추가하기
gmp-map 요소는 웹페이지에 Google 지도를 추가하는 데 권장되는 방법입니다.
이는 웹 구성 요소를 사용하여 만든 사용자 정의 HTML 요소입니다. gmp-map 요소를 사용하여 웹페이지에 지도를 추가하려면 다음 단계를 따릅니다.
부트스트랩을 포함하는
script요소를 HTML 페이지에 추가하거나script요소 없이 JavaScript 또는 TypeScript 소스 파일에 추가합니다. API 키 및 기타 옵션으로 부트스트랩을 구성합니다. 동적 라이브러리 가져오기 또는 직접 스크립트 로딩을 선택할 수 있습니다. 다음 예시는 HTML 페이지에 직접 스크립트 로드 부트스트랩을 추가하는 방법을 보여줍니다.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker" defer ></script>
HTML 페이지에서
gmp-map요소를 추가합니다.center에 대한 위도 및 경도 좌표 (필수),zoom에 대한 확대/축소 값 (필수), 필요한 경우map-id(고급 마커와 같은 일부 기능에 필요)을 지정합니다. 지도가 표시되려면 CSSheight속성이 필요합니다. HTML이나 CSS로 지정할 수 있습니다. 이 예시에서는 편의상 HTML에height스타일 속성이 지정되어 있습니다.<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px" ></gmp-map>
예시 코드 작성
<html>
<head>
<title>Add a Map using HTML</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<gmp-map
center="37.4220656,-122.0840897"
zoom="10"
map-id="DEMO_MAP_ID"
style="height: 400px"
></gmp-map>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
defer
></script>
</body>
</html>div 요소 (레거시) 및 JavaScript를 사용하여 지도 추가하기
div 요소를 사용하여 웹페이지에 지도를 추가하려면 다음 단계를 따릅니다.
부트스트랩을 포함하는
script요소를 HTML 페이지에 추가하거나script요소 없이 JavaScript 또는 TypeScript 소스 파일에 추가합니다. API 키와 기타 옵션을 사용하여 부트스트랩을 구성합니다. 동적 라이브러리 가져오기나 직접 스크립트 로딩을 선택할 수 있습니다. 이 예에서는 HTML 페이지에 동적 부트스트랩을 추가하는 방법을 보여줍니다.<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
HTML 페이지에서
div요소를 추가하여 지도를 포함시킵니다.<div id="map"></div>
CSS에서 지도 높이를 100%로 설정합니다. 지도가 표시되려면 CSS
height속성이 필요합니다.#map { height: 100%; }
JavaScript 파일에서
maps라이브러리를 로드하고 지도를 초기화하기 위한 함수를 생성합니다.center에 대한 위도 및 경도 좌표와zoom에 대한 확대/축소 수준을 지정합니다. 필요한 경우map-id속성을 사용하여 지도 ID를 추가합니다.let map; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } initMap();
예시 코드 작성
TypeScript
let map: google.maps.Map; async function initMap(): Promise<void> { const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; map = new Map(document.getElementById("map") as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } initMap();
JavaScript
let map; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>샘플 사용해 보기
지도 인스턴스에서 속성 설정 및 가져오기
지도 인스턴스와 상호작용하려면 포함 요소를 선택합니다. 이를 위한 코드는 gmp-map 요소를 사용했는지 아니면 div 요소를 사용했는지에 따라 다릅니다.
gmp-map 요소에서 지도 인스턴스 가져오기
gmp-map 요소를 사용할 때 지도 인스턴스를 가져오려면 다음과 같이 document.querySelector를 사용하여 mapElement 인스턴스를 검색합니다.
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
그런 다음 mapElement 인스턴스에서 속성을 설정합니다.
mapElement.zoom = 8;
MapElement 클래스는 내부적으로 Map 클래스를 사용합니다. 여기에 표시된 것처럼 MapElement.innerMap 속성을 사용하여 Map 클래스에 액세스합니다.
mapElement.innerMap.setOptions({
mapTypeControl: false,
});
div 요소에서 지도 인스턴스 가져오기
div 요소를 사용하는 경우 지도 인스턴스를 가져오고 초기화 시간에 옵션을 설정합니다.
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
mapTypeControl: false,
});
초기화 후 다음과 같이 map 인스턴스에서 옵션을 설정합니다.
map.setOptions({
zoom: 8,
});