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>

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>

</body>

</html>