content 값으로 전달한다
html, body { height: 100%; margin: 0 auto; padding: 0; }
#map { height: 100%; }
.price-tag {
position: relative;
padding: 10px 15px; background-color: #4285F4; border-radius: 8px; color: #FFFFFF; font-size: 14px;
transform: translateY(-8px);
}
.price-tag::after {
position: absolute; left: 50%; top: 100%; width: 0; height: 0;
border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #4285F4;
transform: translate(-50%, 0);
content: "";
}
async function initMap() {
let map
const position= { lat: 35.79809, lng: 129.20654 } // 지도 중심 위치 설정
const zoom= 19 // 줌 설정
/* 맵 라이브러리 불러오기 */
const { Map, RenderingType } = await google.maps.importLibrary("maps");
/* 맵 생성하기 */
map= new Map(document.getElementById("map_3rmt"), {
center: position, zoom: zoom, mapId: "7fdaaff1e26cf5f3",
renderingType: RenderingType.VECTOR, // 벡터 지도 사용하기
gestureHandling: "greedy", // 모든 터치 및 스크롤 허용하기
});
/* 마커 라이브러리 불러오기 */
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
const priceTag= document.createElement('div')
priceTag.className= 'price-tag'
priceTag.textContent= "남산 삼릉"
/* 마커 설정하기 */
const marker= new AdvancedMarkerElement({
map: map, position: position, title: "더 많은 정보가 필요하면 클릭하세요..",
content: priceTag,
});
/* 정보창 작성하기 */
const infowindow= new google.maps.InfoWindow({
content: "Kjc: 아직은.. 기다리세요. 삼릉 가는길, 등반 안내도, 갤러리 페이지(나중에 채웁니다 ㅡㅡ;)",
ariaLabel: "삼릉마트" // 표시할 컨텐츠와 지정된 위치를 인수로 전달한다
});
/* 정보창 열기 이벤트 */
marker.addListener("click", () => {
infowindow.open({
anchor: marker, map // 앵커 포인트와 맵을 인수로 전달한다
});
});
}
initMap();