-
Google Map API 사용해보기 [JSP]Jsp 2018. 1. 19. 09:52반응형
01. Google Map API ( 구글 맵 API 사용하기 )
- 빠른 결과를 보기 위해 html을 사용했으며 jsp에도 동일하게 적용가능
- 급하신사람을 위해 맨밑에 글씨로 작성하였습니다.
02. 살펴보기
- 구글 지도 API를 사용하기 위한 라이브러리 설정
LatLng : 내가 보고 싶은 위치 선정 ( maps.google.com -> 주소 등록 -> 마우스 오른쪽버튼 -> 이곳이 궁금한가요? 클릭시 쉽게 찾기 가능 )
mapProp : 지도의 속성을 어떻게 할지 작성
- center : 위치 선정 적용
- zoom : 확대 단계 (가장 이상적인 확대는 16 ~ 18)
- mapTypeId : 맵 타입을 설정 (궁금하면 하나씩 사용해보는것도 좋은 방법)
- Roadmap(normal, default 2D map)
- Satellite(photographic map)
- Hybrid(photographic map + roads and city names)
- Terrain(map with mountains, rivers, etc)
- 맵을 담기 위한 div를 생성 후 mapProp을 통해 맵 적용
- 내가 선정한 위치 위에 Marker( 위치 찍기 )
- position : 내 선정 위치
- map : 내가 생성한 맵
- DomListener를 추가하여 페이지 로드시 initialize() 함수가 실행 시키기
- 맵을 담기 위한 div생성
위의 사진은 결과. zoom 5단계
03. 데려가기
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var LatLng = new google.maps.LatLng(37.506736, 126.783362);
var mapProp = {
center: LatLng, // 위치
zoom:5, // 어느정도까지 세세하게 볼 것인지.
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
반응형'Jsp' 카테고리의 다른 글
HTML에 데이터 저장하기[JSP] (0) 2019.02.26 Marquee tag 사용하기 [JSP] (0) 2018.01.23 $.ajax 사용시 error 발생이유를 알아보기 [Ajax] (0) 2017.12.13 document.readyState 사용하기 [JavaScript] (0) 2017.12.11 화면 뒤로가기 [Jsp] (0) 2017.11.22
