- 구글맵 작성하기
-
1.
먼저, html 문서에서 지도를 보관할 가칭 map 이라는 <div> 요소를 만들고(
<div id="map"> .. </div>), Css에서 이 맵 영역 <div> 요소의 크기(height)를 지정해준다(#map { height: 100%; }). 이어서, Maps JavaScript API 로드를 써서 Maps JavaScript API를 로드해준다: -
2.
다음으로,
async .. await함수 안에서importLibrary()로 Map 클래스를 로드하고,new연산자를 써서 Map 객체를 만들어 초기화해준다: - 3. 맵 고급 마커를 정의하려면; 먼저 AdvancedMarkerElement(및 PinElement) 클래스를 제공하는 marker 라이브러리를 로드해야 한다:
-
4.
InfoWindow 클래스는 지도 위 지정된 위치(보통, 마커)의 팝업창에 컨텐츠를 표시해주는데,
이 팝업창은 컨텐츠 영역(
content:텍스트 문자열이나 DOM 노드)과 꼬리표(ariaLabel:지정된 위치)로 구성된다: -
5.
웹페이지에서 지도를 사용하려면 사용자가 확대/축소 및 화면 이동 을 위해
지도와 상호작용하는 방식을 관리하는 특정 옵션이 필요할 수도 있다.
이러한 옵션은 MapOptions 인터페이스 내에서 정의하는데,
gestureHandling: "greedy"옵션을 주면; 구글 지도 위에서의 모든 터치 작업과 스크롤 이벤트에 반응한다:
/* 빈 div 요소의 높이는 0이므로 맵 div에는 반드시 높이를 명시해주어야 한다! */
#map { height: 100%; }
☞
전체 페이지로 맵을 표시할 때는 html, body { height: 100%; margin: 0 auto; padding: 0; }와 같은 방식으로 추가 설정해준다!
<!-- Maps JavaScript API 로드 -->
<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: "Get your API key", v: "weekly" });
</script>
☞
key는 필수이고,
v 옵션에는 alpha(테스트를 위한 개발자 전용판), beta(주간 추가 변경사항 포함),
weekly(기본값: 주간 업데이트판), quarterly(분기별 업데이트판) 등을 넣어줄 수 있다
←
API key(및 mapId)를 구하려면;
Get your API key
로 가보십시오..
async function initMap() {
let map;
const position= { lat: 35.79809, lng: 129.20654 }; // 지도 위치 설정
const zoom= 15 // 줌 설정 ← 1(지구)/5(대륙)/10(도시)/15(거리)/20(건물)
/* 맵 라이브러리 불러오기 */
const { Map } = await google.maps.importLibrary("maps");
/* 맵 객체의 인스턴스 생성하기 */
map= new Map(document.getElementById("map"), {
center: position, // 지도 중심 위치 설정
zoom: zoom, // 확대/축소 줌 설정
mapId: "DEMO_MAP_ID", // 맵 ID ← 테스트용일 때는 "DEMO_MAP_ID"를 사용하면 된다!
});
}
initMap()
☞
위치를 표시하는 center는 [구글지도] 특정 위치의 마우스 우측버튼 메뉴에서 "이곳이 궁금한가요?"를 눌러서 확인할 수 있다!
async function initMap() {
..
/* 마커 라이브러리 불러오기 */
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
/* 마커 설정하기 */
const marker= new AdvancedMarkerElement({
map: map,
position: position,
title: "더 많은 정보가 필요하면 클릭하세요.." // 타이틀 설정
});
}
initMap();
☞
AdvancedMarkerElement 클래스는 기본 매개변수(map, position, title)를 제공하고,
PinElement 클래스는 추가 맞춤설정을 위한 옵션을 제공한다
async function initMap() {
..
/* 정보창 작성 */
const contentString= "Kjc: 아직은.. 기다리세요. 삼릉 가는길, 등반 안내도, 갤러리 페이지(나중에 채웁니다 ㅡㅡ;)"
const infowindow= new google.maps.InfoWindow({
content: contentString, ariaLabel: "삼릉마트" // 표시할 컨텐츠와 지정된 위치를 인수로 전달한다
});
/* 정보창 열기 이벤트 핸들러 */
marker.addListener("click", () => {
infowindow.open({ anchor: marker, map }); // 앵커 포인트와 맵을 인수로 전달한다
});
}
initMap();
☞ 정보창 작성 시; 이벤트 리스너도 함께 설정해주어야 한다!
async function initMap() {
..
map= new Map(document.getElementById("map"), {
center: position, zoom: zoom, mapId: "DEMO_MAP_ID",
gestureHandling: "greedy" // 구글 지도 위에서의 모든 터치 작업과 스크롤 이벤트에 반응한다
});
}
initMap();
☞ "cooperative" 옵션은(= 기본값임) 구글 지도 위에서 스크롤링 시 확대/축소되지 않고 정상적으로 페이지를 스크롤한다. 예컨대, 지도 위에서 스크롤을 시도하면; "지도를 확대/축소하려면 Ctrl 키를 누른 채 스크롤하세요"라는 메시지가 나타난다. 또한 터치 스크린 기기에서 지도를 두 손가락으로 움직여 확대/축소하고 화면 이동할 수도 있다
map= new Map(document.getElementById("map"), {
center: position, zoom: zoom, mapId: "DEMO_MAP_ID",
gestureHandling: "none", zoomControl: false // 모든 화면 이동 및 확대/축소 동작을 중지한다
});
☞
gestureHandling: "none" 옵션은 zoomControl: false 옵션과 함께 사용해야 한다!
✓
화면 이동과 확대/축소 컨트롤을 허용하되, 지도를 특정 경계 또는 최소 및 최대 확대/축소로 제한하는 것이 바람직할 수도 있는데,
restriction, minZoom 및 maxZoom 옵션을 설정해주면 된다:
map= new Map(document.getElementById("map"), {
center: position, zoom: zoom, mapId: "DEMO_MAP_ID",
minZoom: zoom - 3, maxZoom: zoom + 3, // 줌 축소, 확대의 제한값 설정
restriction: {
latLngBounds: {
north: -10, south: -40, east: 160, west: 100, // 각 방향별 경계치 설정
}
}
});
