API - 외부 모듈을 연결
구글맵 API를 사용하여 맵을 불러오고, Marker(마커) 아이콘, 속성 등을 바꾸는 법
작동원리는 주석에 달아놨고, 다음에 더 정리해서 축약하고,
CSS와 JS , HTML을 분리한 뒤 정리된 코드를 다시 올리겠다.
이용한 출처
좌표 검색기 : https://map.yjhoon.com/naver/
무료 아이콘 링크 : https://icon-icons.com/ko/
구글맵 API : https://mapsplatform.google.com/
여기서 중요한것은
API에서 Key값을 받아서 script에 추가해주어야한다.
YourKey에 자신의 키값을 넣자
코드가 길어 수행결과 먼저 보여주겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구글 맵 API</title>
<style type="text/css">
*{
margin: 5px;
padding: 5px;
}
#map{
width: 500px;
height: 300px;
border: 2px solid blue;
}
/* 확대/축소 등 구글 지도의 기본 UI 감추기 */
.gmnoprint, .gm-control-active.gm-fullscreen-control {
display: none;
}
</style>
<script src="http://maps.google.com/maps/api/js?key=YourKey®ion=kr"></script>
<!--인증키값과 지역값설정-->
</head>
<body>
<div id="map">
</div>
<button id="btn1">지도 중심 이동-1</button>
<button id="btn2">지도 중심 이동-2</button>
<script type="text/javascript">
var btn1=document.getElementById('btn1');
btn1.addEventListener('click',func1);
var btn2=document.getElementById('btn2');
btn2.addEventListener('click',func2);
var map; // 전역변수로 만들어둬야함
function initMap() {
var coordinates = { // 경도 위도 설정
lat: 37.4841305,
lng: 126.9343421
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: coordinates, // 정해준 경도,위도가 가운데로 갈 수 있게
scrollwheel: true // 우리가 쓴 zoom이랑 같은데 스크롤 기능 활성화
});
var measle = new google.maps.Marker({ // 마커를 추가하기 위한 기본생성자
position: coordinates,
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
var marker = new google.maps.Marker({ // 마커 재정의
position: coordinates,
map: map,
icon: {
url: "img/mark.png", // 마커 이미지 경로
labelOrigin: new google.maps.Point(75, 32), // 라벨이 어디에 위치하게 할지
size: new google.maps.Size(16,16), // 맵에서 표시될 아이콘 사이즈
anchor: new google.maps.Point(8,16)
},
label: {
text: "우리집", // 라벨에 붙을 이름
color: "#C70E20", // 컬러 설정
fontWeight: "bold" // 굵게 표시하기 위한 bold체
}
});
}
google.maps.event.addDomListener(window, "load", initMap); // 구글마커가 재정의 된 뒤 호출
function func1(){
var coordinates = {
lat: 34.694,
lng: 135.502
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: coordinates,
scrollwheel: true
});
var marker = new google.maps.Marker({ // 마커를 담을 생성자 생성
position: coordinates,
map: map,
icon: { // 아이콘에 대한 속성 재정의
url: "img/japan.png", // 아이콘 경로 지정 (url링크 혹은 내 파일경로)
labelOrigin: new google.maps.Point(32,33),
size: new google.maps.Size(16,16),
anchor: new google.maps.Point(32,16)
},
label: {
text: "오사카성",
color: "#C70E20",
fontWeight: "bold"
}
});
google.maps.event.addDomListener(window, "load", initMap);
}
function func2(){
var coordinates = {
lat: 37.4999989,
lng: 127.0354244
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: coordinates,
scrollwheel: true
});
var marker = new google.maps.Marker({
position: coordinates,
map: map,
icon: {
url: "img/school.png",
labelOrigin: new google.maps.Point(75, 32),
size: new google.maps.Size(16,16),
anchor: new google.maps.Point(8,16)
},
label: {
text: "학원",
color: "#C70E20",
fontWeight: "bold"
}
});
google.maps.event.addDomListener(window, "load", initMap);
}
</script>
</body>
</html>
'개발자노트 > 웹' 카테고리의 다른 글
| JSP와 Servlet(서블릿) + Servlet doGet(),doPost() (0) | 2022.08.01 |
|---|---|
| 클라이언트와 서버간의 동작 과정(웹 서비스 진행 과정) (0) | 2022.08.01 |
| HTML - jQuery를 이용한 toggle() 예제 ( 사진 열기 ) (0) | 2022.07.28 |
| HTML - jQuery를 이용한 toggleClass("on") 예제 (0) | 2022.07.28 |
| HTML - 마우스 이벤트 (0) | 2022.07.27 |
