[GoogleMap API] CCTV정보를 통해 안전지역 표시or위험지역표시

GoogleMap API Key 발급

https://developers.google.com/maps/documentation?hl=ko

Google Map API Key를 발급받으면서 Sample code를 확인하니,
html에서 src를 통해 발급받은 api key를 작성하는 것으로 보인다. 

https://console.cloud.google.com/home

 

이렇게 나온 API Key를 이전에 html에 작성해주면 된다.
이렇게 되면 이제 google Map을 사용할 수 있게 되고 추가적인 코드로 cctv지역을 표시할 것이다.
그렇게 하기위해서는 cctv data가 필요하다.
나에게는 cctv data 5만개 이상이 excel로 있기에 이를 code에 사용하기 위해 Json파일로 바꾸어주었다.

Excel data to JSON

http://shancarter.github.io/mr-data-converter/

JSON Format

JSON에는 50000개의 {Address : 지역정보, Number : cctv 개수, lat, lng :  위도, 경도} object를 가지고 있다.

Frontend Code

title name : Map
body : setting guide, range input button, mode button, change button
range text input과 mode button으로 값을 변경하고
Change button을 통해 이 값을 적용하여 initMap()을 통해 mapping한다.   

Backend Code(사실상 backend는 아니고 mapping code이다.)

Html file에서 frontend에 생성한 button 클릭 시 mode와 range를 변경하기 위해 rangeChange, modeChange function을 생성하였으며, defult value로는 mode=0, range=50이다.
mode 0은 기본 map, range는 cctv 반경 범위(m)이다.
Mode 1은 cctv 반경을 red circle, 
Mode 2는 cctv 반경은 white circle, 그 외 범위를 red bound 한다.
currentLocation은 frontend에  Current Location 이라는 button을 생성해주고,
Button click -> 사용자 현재 위치 정보를 map에 나타내준다.

initMap은 전체적인 mapping을 해주는 역할이다. 
Range,mode에 대한 정보를 console.log 해주고, currnentLocation function을 실행하며 Google map을 기반으로 mapping을 한다. 처음 실행했을 때 또는 Mode or range의 변경이 있을 때 initMap이 실행된다.
mode가 0이 아닐 경우 Map 전체에 대해 listener를 등록하여 클릭 시 cctv가 없는 위치라는 정보를 알려준다.
(만약 클릭한 위치가 cctv 반경 내의 범위라면,
다음 page에서 설명하는 code를 통해 cctv가 설치된 곳의 주소 정보를 알려준다.)

이 후, 앞서 보여준 json file을 통해 data를 불러온다.
만약, mode=1이면서 json file의 data에서 위도,경도 정보가 둘 다 있다면
그 위치에 원을 빨강색으로 그려준다. 또한 각 원들에 대해 listener를 등록하여 cctv 범위에 속하는 곳을 클릭할 경우 cctv의 주소정보를 알려준다.
만약 mode=2이라면,
한국 전체를 빨강색 원으로 그려주고, 전체를 클릭시 cctv범위 밖이라는 listener를 등록해준다. Json file에서 불러온 data의 위도 경도가 모두 있다면 그 위치를 흰색으로 원을 그려준다.
또한 각 원들에 대해 listener를 등록하여 cctv 범위에 속하는 곳을 클릭할 경우 cctv의 주소정보를 알려준다.