사전작업으로 구글 인증키를 발급 받은 후 진행해야 합니다.
예시
HTML
<body>
<section>
<h1>남산타워</h1>
<div id="google-map"></div>
</section>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSaNN-dG5G4UMVIrrYU2M5-h2JTMxUdQE&callback=initMap"
async defer></script>
<script>
// 이곳에 코드 작성
</script>
</body></body> 위에 google API script를 추가해줍니다.
그리고 API가 로드된 후에 script가 읽혀질 수 있도록 아래에 <script> 영역을 생성합니다.
CSS
#google-map {
width:500px;
height: 300px;
}*필수로 맵 엘리먼트의 높이 값을 지정해줘야 합니다.
JS
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('google-map'), {
center: {
lat: 37.551073,
lng: 126.987893
},
zoom: 15
});
}
</script>위에 작성했던 <script>안에 코드를 넣어줍니다.
center에서 lat과 lng의 값은 좌표 값입니다. 여기에서 좌표값을 참조할 수 있습니다.
zoom은 얼마나 지도를 확대할 수 있는지입니다. 숫자가 클수록 더 커집니다.
lat(latitude), lng(longitude) 값 구하기
place name에 주소를 입력해줍니다.
lat, lng값을 복사해서 위의 스크립트 내부에 붙여넣기하면 해당하는 좌표로 설정된 맵이 나옵니다.
'~2022 > FE-Javascript' 카테고리의 다른 글
| 태그 내부에 컨텐츠 추가하기 append(), prepend(), appendTo(), prependTo(), before(), after() (0) | 2019.10.02 |
|---|---|
| placeholder.js 라이브러리 소스 분석 도전, 스터디 개념 (0) | 2019.06.05 |
| 02. Rest 파라미터 - 스프레드(Spread) 연산자와 Rest 파라미터 (0) | 2018.10.29 |
| 01. Spread 연산자 - 스프레드(Spread) 연산자와 Rest 파라미터 (0) | 2018.10.29 |
| ajax 이슈, 파라미터 값이 안 보내져요. (processData) (0) | 2018.10.24 |
| input 포맷(전화번호 입력받기)__regex__replace__substr (0) | 2018.10.24 |
| 버튼 클릭하여 해당영역으로 스크롤 이동하기 scrollintoview(); (0) | 2018.10.23 |
| 자동으로 연도 변경하여 삽입하기 (0) | 2018.10.23 |