본문 바로가기

멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드4-4. google map api 사용-1

by 이쟝 2022. 2. 14.

구글 맵 api 불러오기 (키가 필요)

<style async defer src="http://maps.googleapis.com/maps/api/js?key=API키 이름&callback=함수이름">
</style>

함수이름 뒤에 &region=kr"을 적어야 한다. 안그러면 일본해(동해)로 표기된다.
callback 함수: 나중에 호출되는 함수(로딩이 끝나면 자동으로 호출되는 함수)-> 특정함수에 전달되어 특정함수가 어떤 조건에 의해 호출하는 함수

1. HTML 파일

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>google map</title>
    <style>
        #gmap{
            width:100%; 
            height:700px;
            outline:1px solid gray
            }
    </style>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=키이름&callback=initMap&region=kr">
	</script>
</head>
<body>
    <div id="gmap"></div>
    <script src = "googleMap1.js"></script>
</body>
</html>

<script>는 div보다 더 뒤에 적어야 한다.(그래야 실행됨)

2. JS 파일 (googleMap1.js)

1. 지도의 표시 위치를 위도, 경도 값으로 설정하고 initMap 함수 작성

let latitude = 37.5729503;   // 서울시청의 위도
let longitude = 126.9793578; // 서울시청의 경도
let map; // 다른곳에서도 사용(구글 맵 객체를 전역변수로)

function initMap() {  // callback함수: api가 로드되면 callback되는 함수로 api 호출시 작성해둠

}

2. 위도와 경도를 기준으로 표시를 위치를 정하기

let latitude = 37.5729503;  
let longitude = 126.9793578;
let map; 

function initMap() {  
	
    let myCenter = new google.maps.LatLng(latitude, longitude);
    
    // 지도의 기본 데이터(기준위치, 줌의 정도, 지도의 타입)
    let option = { // json형식 : key와 value의 형식을 가짐
    	center: myCenter, // 지도의 가운데(지도를 중앙으로 잡을 곳)
        zoom: 12,  // 확대 정도(0~21사이의 값을 사용한다. 숫자가 클수록 확대)
        mapTypeId: google.maps.MapTypeId.ROADMAP  
    };
}

LatLng 클래스는 위/경도 좌표를 정의한다.
지도종류(mapTypeId): ROADMAP, HYBRID, SATELLITE, TERRAIN
- ROADMAP: normal / HYBRID: photographic map + road and city names
- SATELLITE: photographic map / TERRAIN: map with mountains rivers..

3. 구글맵 객체 생성

let latitude = 37.5729503;   
let longitude = 126.9793578; 
let map; 

function initMap() {
	...
	map = new google.maps.Map(document.getElementById("gmap"), option);
}

첫번째 매개변수: 지도 표시될곳(HTML의 id gmap이 있는 곳), 두번째 매개변수: json형식의 데이터

4. 마커 표시

마커를 할 때 필요한 형식은 json 형식으로(데이터는 json 형식으로)

let marker = new google.maps.Marker({
	position: myCenter, // 마커를 표시할 위치
	map: map,      // 마커로 표시될 지도
	title: "서울시청",  // 풍선도움말
	icon: "gmap_pin.png" // 마커 표시하기
});
	marker.setMap(map); // 지도를 마커에 표시한다.

5. 마커 클릭 시 대화상자를 띄우기(이벤트를 이용)

대화상자에 표시할 내용 만들기(html로 내용만들기(문자열로))

let information = "서울시청 <br/>위도 : " + latitude + "<br/>경도 : " + longitude + "<br/>";
    information += "<a href='https://www.seoul.go.kr'><img src='../../img/nature.jpg' width='80' height='50'/></a>"

대화상자 객체 만들기

let info = new google.maps.InfoWindow({ content: information });

InfoWindow는 지도 위에 올리는 정보 창을 의미한다.
content: 내부에 표시할 콘텐츠(텍스트 또는 DOM 노드 문자열)을 설정한다.(정보 창 콘텐츠)

이벤트를 등록하기

google.maps.event.addListener(marker, 'click', function() {
		info.open(map, marker)  // 지도객체, 마커
});

addListener( ): 이벤트를 등록하는 함수
첫번째 매개변수 : 이벤트를 처리할 마커 두번째 매개변수 : 이벤트 종류(on을 빼기) 세번째 매개변수 : 대화상자를 여는 함수
대화상자 객체.open(map, anchor): 정보 창을 여는 함수, 앵커를 전달하면 앵커 위에 정보 창을 연다.
- map: Map 객체
- anchor: 정보 창이 표시될 위치로 직접 좌표를 정의 하거나 Marker 인스턴스를 참조할 수 있도록 할 수 있다.

6. 마커의 반경 표시

let myCity = new google.maps.Circle({
	center: myCenter,
	radius: 500,             // 반지름(m)
	strokeColor: 'blue',  // 경계선의 색상
	strokeOpacity: 0.5,      // 경계선의 투명도(0(투명)~1(불투명))
	strokeWidth: 3,          // 선의 두께(px)
	fillColor: 'skyblue',    // 배경색
	fillOpacity: 0.3         // 배경색의 투명도(0~1)
});

myCity.setMap(map);

[전체 코드]

// 지도의 표시 위치를 위도 경도 값으로 설정
let latitude = 37.5729503;   // 서울시청의 위도
let longitude = 126.9793578; // 서울시청의 경도
let map; // 다른곳에서도 사용해야 해서

function initMap() {  // callback함수: api가 로드되면 callback되는 함수로 api 호출시 작성해둠

	let myCenter = new google.maps.LatLng(latitude, longitude);
	
	// 지도의 기본 데이터(기준위치, 줌의 정도, 지도의 타입)
	let data = {
		center: myCenter, 
		zoom: 12,  
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	// 구글맵 객체 생성     
	map = new google.maps.Map(document.getElementById("gmap"), data);

	// 마커 표시 생성
	let marker = new google.maps.Marker({
		position : myCenter,
		map : map,
		title : "서울시청",
		icon : "gmap_pin.png"
	});
	
	marker.setMap(map); 
	
	// 대화상자에 표시할 내용 만들기
	let information = "서울시청 <br/>위도:" +latitude+ "<br/>경도:" +longitude+ "<br/>";
		information += "<a href='https://www.seoul.go.kr'><img src='../../img/nature.jpg' width='80' height='50'/></a>";
		
	// 대화상자 객체 만들기
	let info = new google.maps.InfoWindow({ content: information });

	// 이벤트 등록 하기
	google.maps.event.addListener(marker, 'click', function() {
		// 지도객체, 마커
		info.open(map, marker)
	});	
	
	// 반경표시
	let cityCircle = new google.maps.Circle({
		center : myCenter,
		radius : 500,
		strokeColor : 'blue',
		strokeOpacity : 0.5,
		strokeWidth : 3, 
		fillColor : "skyblue",
		fillOpacity : 0.3,
	});
	
	cityCircle.setMap(map);
}

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드5-1. jquery의 기초와 선택자-1 (0)	2022.02.15
프론트엔드4-5. google map api 사용-2(geocoding) (0)	2022.02.15
프론트엔드4-3.[javascript] 정규표현식을 이용한 유효성 검사 (0)	2022.02.13
프론트엔드4-2.[javascript] 팝업메뉴 만들기 (0)	2022.02.11
프론트엔드4-1.[javascript] var, let, const 변수 선언 (0)	2022.02.11

티스토리툴바