본문 바로가기

googlemap

[HTML5] 웹에서 현재 위치 정보 얻기 - geolocation 우리동네 교통사고 다발지역 서비스는 맵 기반 서비스다보니, 어딘가를 지나가다가 우연히 이 서비스를 사용하고 있다면 현재 위치와 가까운 곳에 교통사고 다발지역이 있을지 궁금해 했으면 하는 바람으로.. 서비스에 현재 위치로 이동하는 기능을 추가했다. 검정 과녘 같이 생긴 아이콘을 누르면 현재 위치로 이동한다. 해당 기능을 위해 HTML5 API인 geolocation을 이용하면 쉽게 구현이 가능하다. $('#myLocation').on('click', function() { navigator.geolocation.getCurrentPosition(function(pos) { latLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);.. 더보기
[GoogleMap] 위치 검색 자동완성 우리동네 교통사고 다발지역 서비스를 위해서는 일단 위치 검색을 할 수 있어야 한다. 제일 먼저 생각나는 것이 서울이라고 가정하면 구단위를 선택하고 그 다음에 동단위를 선택해야 하는데 그렇게 검색한 결과의 위도/경도 정보를 알 수 있어야 구글맵에 마커를 보여줄텐데 그 값을 어떻게 알 수 있을까.. 또 각 구단위, 동단위를 선택하려면 select box로 구현을 해서 비동기로 값이 바뀔 때마다 이벤트 핸들링을 해줘야 하나... 막 이런 생각이 먼저 들었는데, 다행히도 구글맵에는 위치 자동완성 해주는 컴포넌트를 제공해 주고 있다. text input에 내가 입력하고 싶은 위치 정보를 넣으면 아래 이미지처럼 자동완성된 가능목록 중에서 선택할 수 있다. 이 기능을 위해 구글맵의 기본 라이브러리를 사용하면 되나 그.. 더보기
[GoogleMap] 구역을 표시해보자 - Polygon 교통사고 다발지역 API의 응답값이 정확한 사고지점을 알려주는 것이 아니라, 사고가 많이 발생하는 구역의 좌표와 그 중앙값의 위도/경도값을 제공해 주기 때문에 이런 정보를 맵에 보여주기 위해서는 아래와 같이 해당 구역을 표시해 줄 수 있는 기능이 필요하다. Polygon이라고 하는데 아래와 같이 원형태로 보여 주려면 엄청 많은 좌표값이 필요하다. 교통사고 다발지역 API에서 제공되는 샘플 좌표값은 이렇다. [126.97851642,37.57485821],[126.97849053,37.57464986],[126.97841385,37.57444952],[126.97828933,37.57426488],[126.97812175,37.57410305],[126.97791756,37.57397023],[126.97.. 더보기
[GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (2) [GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (1)에서 기본적인 마커 사용법에 대해서 알아 보았는데, 우리동네 교통사고 다발지역 서비스를 위해서는 아직 부족하다. 교통사고 다발지역이 한 곳이라면 충분하겠지만 아쉽게도 그렇지가 않다. 그래서 하나의 맵에 마커를 여러 개를 보여줘야 하며, 그 사고지역의 교통사고 상세 정보를 보여주기 위해서는 개별 마커를 클릭했을 때 팝업을 띄울 수 있으면 좋겠다. 여러개 마커 보여주기 마커를 생성하는 방법이 Maker 객체를 생성하고 그 객체를 Map에 전달하는 방식이 아니고 그 반대로 Map을 먼저 생성한 다음에 Maker객체 생성할 때 Map 객체를 전달하는 방식이기 때문에, 여러개 마커를 보여주기 위해서는 마찬가지로 Map객체를 먼저 생성하고 필요한.. 더보기
[GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (1) 맵에는 역시 마커가 있어야 제 맛. 마커를 추가해 보자 goole.maps.Marker 객체 하나만 생성해 주면 아래와 같이 빨간 물방울을 거꾸로 한 모양의 기본 아이콘이 지정된 위치에 표시가 된다. 위에 코드를 보기 전까지는 Maker객체를 먼저 생성하고 해당 객체를 Map 객체를 생성할 때 넣어 주겠거니 생각했었는데, 그 부분이 생각했던 것과는 달랐던 것 같다. 어쨌든 잘 나온다. 기본 아이콘은 좀 식상해 보인다. 다른 이미지로 바꿔보자. 이미지 경로를 가지고 있는 google.maps.MarkerImage 객체만 생성해서 Maker 객체 생성 시 icon 속성에 넣어 주기만 하면 된다. 그럼 이렇게 잘 나온다. 역시 Maker에 대한 설명은 구글 문서에 잘 나와 있다. https://develope.. 더보기
[GoogleMap] Control options for google.maps.Map 위와 같이 구글에서 제공되는 샘플을 그대로 실행해 보면 아래 이미지처럼 잘 맵이 나오긴 하는데 만들려고 하는 우리동네 교통사고 다발지역 서비스에서는 위성맵도 지형맵도 명시적인 확대/축소 버튼도 기본으로 제공되는 저런 기능들이 사실 다 필요가 없다. 이렇게 구글맵 생성시 기본으로 제공되는 기능들을 disable 시키고 싶은데 간단한 방법으로 해당 기능들을 제어할 수 있다. 한번 기본 옵션들을 다 disable 시켜보자. disableDefaultUI 속성을 true로 설정만 하면 아래 이미지처럼 기본으로 보이던 모든 UI옵션들이 깔끔하게 사라진다. 그런데 갑자기 확대/축소를 하기 위해 +/- 버튼만 필요하면 어떻게 해야 할까? 간단히 zoomControl 속성만 추가해 주면 된다. 간단한다. 관련된 컴포넌.. 더보기
[GoogleMap] 웹페이지에 구글맵 띄우기 구글맵 자바스크립트 API를 이용하여 구글맵을 페이지에 띄우기 위해서는 세가지가 필요하다. 맵을 띄우기 위한 DOM element 구글맵 자바스크립트 API 로딩 후 실행할 callback function 구글맵 자바스크립트 API 로딩 위 세가지 요소를 제일 간단하게 보여주는 샘플이 https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/map-simple?hl=ko 에서 제공된다. 상세 내용은 링크 참조. Simple Map | Maps JavaScript API | Google Developers This example creates a map that's centered on Sydney, N.. 더보기
[GoogleMap] API 키 발급 for Maps JavaScript API 구글맵을 사용하기 위해서는 Google Maps Platform에서 먼저 API키를 발급받아야 한다. https://cloud.google.com/maps-platform/ Geolocation API | Google Maps Platform | Google Cloud Google Maps Platform을 선택하면 정확한 실시간 데이터 및 동적 이미지로 몰입형 위치정보 활용 환경을 만들고 더 나은 비즈니스 의사결정을 내릴 수 있습니다. cloud.google.com 구글맵에서 제공하는 서비스들이 다양하게 있는데 1. 난 자바스크립트를 이용해서 웹서비스로 개발할 것이기 때문에 Maps Javascript API를 선택했다. 2. 아래와 같이 나오면 사용설정 버튼만 눌러주면 된다. 3. API 및 서비스 .. 더보기

티스토리툴바