전체 글 썸네일형 리스트형 [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 및 서비스 .. 더보기 [openAPI] 법정동 코드는 어디서 찾을까 도로교통공단에서 제공하는 API 명세서(specification)을 보다보면 https://www.data.go.kr/dataset/15003493/openapi.do 불러오는 중입니다... 요청값으로 아래와 같이 법정동 시도코드/시군구코드를 넣어야 한다. 법정동 코드란 무엇일까.. 항목명(국문) 항목명(영문) 항목크기 항목구분 샘플데이터 항목설명 시도코드 siDo 2 필수 11 법정동 시도 코드 시군구코드 guGun 3 필수 200 법정동 시군구 코드 우리나라 주소 체계는 크게 법정동과 행정동이 있다고 한다. 법정동이란 법률로 지정된 행정구역 단위로 말처럼 법으로 정한 동을 의미한다. 행정동은 행정편의를 위해 수시로 생겼다가 없어졌다가 할 수 있는 것이라 한다. 행정동이 필요한 이유는 정의처럼 행정 편.. 더보기 [openAPI] 교통 관련 다른 openAPI 우리동네 교통사고 다발지역 서비스를 만들고 지인들한테 무언가 더 보여주었음 하는 정보가 있을지 물어보았더니 대리운전 광고(오호라...), 실시간 교통정보 연계, CCTV, 서울시 외 수도권 포함 정보 등등 여러 의견이 있었다. 이런 데이타들을 같이 보여주기 위해 도로교통공단에서 제공하는 데이타로는 불가능할 것 같고, 혹시 교통 관련 다른 API들이 없을까 해서 찾아보았더니 역시나..또 있다. 찾은 API는 도로교통공단 상위 조직처럼 보이는 국토교통부에서 제공하는 API다. 느낌적으로 더 많고 좋은(?) 데이타들을 제공해 줄 것만 같다. http://openapi.its.go.kr/portal/dev/dev5.do 교통정보공개서비스 개발자센터 HOME > 개발자센터 > OpenAPI레퍼런스 > 사고정보 사.. 더보기 [openAPI] 도로교통공단 교통사고 정보 교통사고분석시스템(TAAS, Traffic Accident Analysis System)에서 제공되는 사고다발지 검색맵을 보면 http://taas.koroad.or.kr/gis/mcm/mcl/initMap.do?menuId=GIS_GMP_ABS# 교통사고분석시스템 GIS taas.koroad.or.kr 특정 년도에 사고다발지였던 곳이 다른 년도에도 계속 사고다발지일까하는 궁금점이 생겼다. 만약 그렇다면 해당 지역 교통 시스템에 무언가 문제가 있기 때문일 것이며, 그것들이 개선이 되지 않는다면 시민들의 제보를 통해서라도 개선이 되어야 하지 않을까..하는 생각에 관련된 데이타를 제공해주는 API를 찾아보니 역시나 있다. 공공데이터포털에서 도로교통공단에서 제공하는 교통사고 정보 API를 찾았고, https:.. 더보기 이전 1 2 3 4 5 다음
