1. 구글맵 사용하기
페이지 정보
작성자 관리자 댓글 0건 조회 863회 작성일 21-06-29 11:00본문
1. 구글맵 사용하기
1. API 사용설정
Javascript에서 구글맵을 불러오기 위해서는 구글 클라우드 플랫폼에서 Maps Javascript API를 사용설정하고 KEY값을 받아와야합니다.
https://console.cloud.google.com/
기존 프로젝트에 API를 설정할 분은 해당 프로젝트를 선택해주시고, 아니라면 새로운 프로젝트를 생성합니다.
왼쪽 위의 탐색 메뉴 아이콘을 클릭한 후 API 및 서비스>라이브러리에서 maps javascript api를 검색하고 사용설정합니다.
그리고나서 API 및 서비스>사용자 인증 정보에서 사용자 인증 정보 만들기>API 키를 선택한 후 생성된 KEY를 확인합니다.
이 KEY값은 이제 구글 맵을 띄울 때 사용됩니다.
2. 구글 맵 띄우기
YOUR_KEY부분에 위에서 생성한 API 키를 넣어주세요.
파일명 : googlemap.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Map</title>
</head>
<body>
<div id="map" style="width:100%; height: 100%;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap®ion=kr"></script>
<script>
function initMap() {
var seoul = { lat: 37.5642135 ,lng: 127.0016985 };
var map = new google.maps.Map(
document.getElementById('map'), {
zoom: 12,
center: seoul
});
}
</script>
</body>
</html>
서울의 위도 경도를 입력하고 그 중심으로 zoom이 12인 지도를 첫 화면에서 보여주는 코드입니다.
query에 region=kr을 추가하지 않으면 동해가 일본해(동해)로 표기됩니다.
center 속성은 맵의 중심을 어디로 할지 정의합니다. LatLng 객체를 생성하여 맵에 특정 포인트를 정합니다.
zoom 속성은 맵에서의 줌 레벨을 정의합니다.
mapTypeId 속성은 화면에 표시될 맵 타입을 정의합니다. 아래 나오는 맵 타입을 지원합니다:
- Roadmap(normal, default 2D map)
- Satellite(photographic map)
- Hybrid(photographic map + roads and city names)
- Terrain(map with mountains, rivers, etc.)
참고 사이트
댓글목록
등록된 댓글이 없습니다.