-
구글 지도 api 연동Web Programming 2023. 10. 25. 23:07728x90반응형
구글 map api 를 이용해서 간단한 지도 표출하기 !!
항상 공공이든 이런 api 를 쓰려면 키 발급 부터 해야된다.
구글 map 플랫폼에서 키 발급부터 하자.
키 발급에 대해서는 블로그 글이 차고 넘치니 검색 ㄱㄱ !!
Google Maps Platform 시작하기 | Google for Developers
Google Maps Platform 시작하기 | Google for Developers
의견 보내기 Google Maps Platform 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 페이지에서는 Google Maps Platform의 API 및 SDK를 사용하기 위한 기본 필
developers.google.com
먼저 jsp에 map을 뿌려줄 div 생성
<body> <div id="google_map" style="height: 1000px;"></div> </body>그다음에 발급 받은 키 선언
<head> <script defer src="./index.js"></script> <script defer src="https://maps.googleapis.com/maps/api/js?key=<API 키>&callback=initMap" ></script> </head>스크립트 작성
window.initMap = function () { const map = new google.maps.Map(document.getElementById("google_map"), { center: { lat: 37.5400456, lng: 126.9921017 }, // 지도의 센터 zoom: 10, }); // 장소 경도 위도 const buildings = [ { label: "a", name: "장소1", lat: 37.5115557, lng: 127.0595261 }, { label: "b", name: "장소2", lat: 32.5162379, lng: 127.0050378 }, { label: "c", name: "장소3", lat: 37.566596, lng: 127.007702 }, { label: "d", name: "장소4", lat: 38.5251644, lng: 126.9255491 }, { label: "e", name: "장소5", lat: 37.5125585, lng: 127.1025353 }, ]; buildings.forEach(({ label, name, lat, lng }) => { const marker = new google.maps.Marker({ position: { lat, lng }, label, map, }); }); };끝!!
지도가 정상 표출되면 이런 너낌 ~
728x90반응형'Web Programming' 카테고리의 다른 글
tui-gird pagination 오류 (1) 2023.10.25 구글 지도 연동 오류 MarkerLabel_.getSharedCross is not a function (0) 2023.10.25 디비에버 Dbeaver 다크 모드 변경 (0) 2023.09.28 OEE(Overall Equipment Effectiveness) 설비종합효율 (0) 2023.09.27 자바스크립트 padStart() (0) 2023.09.27