일과 생활

함께 쌓여가는 개발자의 경험과 기록

Open API/Google

구글맵 infoWindow 만으로는 html 사용에 제약이 많습니다. 디자인 소스 적용이 어렵기 때문입니다. 해결을 위해 플러그인이 제공되고 있습니다. 그 이름 " infoBox" !! 좀더 자유롭게 디자인 소스를 입힐 수 있는데요. 사용하기 위해서는 infobox.js 를 추가해야 합니다. JS : 다운로드 샘플 코드 : http://www.uhoon.co.kr/test/6502.html ** 기본 infoWindow에서는 불가능 했던 각종 옵션들이 무궁무진합니다. ** API Reference : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html This example shows the "..

2016. 12. 14.

Open API/Google

구글맵 V3 + 마커 샘플입니다. 일반적으로 기본 구글맵에서 가장 많이쓰는것이기도 한데요.. Test Url : http://www.uhoon.co.kr/test/4338/4338.html * Info Window : https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ko* Info Window Options : https://developers.google.com/maps/documentation/javascript/reference?hl=ko#InfoWindowOptions

2016. 12. 12.

Open API/Google

개발 중 맵상에 수백 수만개의 마커를 생성해야하는 경우가 당연히(?) 발생됩니다.이때 버버벅...리소스를 엄청나게 먹으면서 느려질수가 있는데요. 이럴 때 사용할수 있는 샘플입니다. 기존 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 소스에다가 추가했습니다. 현재 보여지는 맵상에 좌측상단 좌표와 우측하단 좌표를 읽어와서 해당 범위내에 있는 마커만 보여지도록 하고맵이 확대/축소되거나 좌표가 이동하는 경우에 마커를 다시 뿌려지도록 하는 방법입니다. 기능 구현위주의 샘플이다보니 좀 다듬어야할 부분이 많지만 쓰시는분에게 떠넘기기를..^^;;( 여기서 상황에 따라 고민해야할 내용으로... 이걸 Js에서 처리할지..DB에서 처리할지.. ) 주요 내용으로는 :..

2016. 12. 12.

Open API/Google

구글맵 V3 기본 기능입니다..다음번에는 길찾기 등...animation 쪽으로.. Test Url : http://www.uhoon.co.kr/test/613.html * 기능 기본 맵 아이콘 마커 (marker) 말풍선 (infoWindow) 주소로 위경도 검색하기 (geocoder) 거리별 중심점 기준으로 원그리기 ( Circle ) radius : 10Km 5Km latitude : longitude: address

2016. 11. 21.