경주 남산, 삼릉 가는길

새 <div> 요소를 만들고 Css 클래스 및 텍스트 컨텐츠를 할당하여, 이를 AdvancedMarkerElement.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();