구글맵 v3 단순 다중 마커 (배열이용)

Open API/Google|2016. 12. 12. 18:36
반응형

종종 단순 배열 마커가 필요한 

경우가 있을때 사용하기 위한 샘플입니다.


많은 기능이 들어간 샘플에서 기능 걷어내는것도 일인지라..


Test Url : http://www.uhoon.co.kr/test/6477.html



<!doctype html> <html> <head> <meta charset="utf-8" /> <title>googlemap v3 </title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <SCRIPT LANGUAGE="JavaScript"> <!-- var contentArray = []; var iConArray = []; var markers = []; var iterator = 0; var markerArray = []; var map; // infowindow contents 배열 contentArray[0] = "Kay"; contentArray[1] = "uhoons blog"; contentArray[2] = "blog.uhoon.co.kr"; contentArray[3] = "blog.uhoon.co.kr "; contentArray[4] = "blog.uhoon.co.kr"; contentArray[5] = "blog.goodkiss.co.kr"; contentArray[6] = "GG"; contentArray[7] = "blog.goodkiss.co.kr"; contentArray[8] = "II"; contentArray[9] = "blog.goodkiss.co.kr"; // marker icon 배열 iConArray[0] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[1] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[2] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[3] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[4] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[5] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[6] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[7] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[8] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[9] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; // 위경도 배열 /* var markerArray = [ new google.maps.LatLng(40.3938,-3.7077) , new google.maps.LatLng(40.45038,-3.69803) , new google.maps.LatLng(40.45848,-3.69477) , new google.maps.LatLng(40.40672,-3.68327) , new google.maps.LatLng(40.43672,-3.62093) , new google.maps.LatLng(40.46725,-3.67443) , new google.maps.LatLng(40.43794,-3.67228) , new google.maps.LatLng(40.46212,-3.69166) , new google.maps.LatLng(40.41926,-3.70445) , new google.maps.LatLng(40.42533,-3.6844) ]; */ markerArray[0] = new google.maps.LatLng(40.3938,-3.7077); markerArray[1] = new google.maps.LatLng(40.45038,-3.69803); markerArray[2] = new google.maps.LatLng(40.45848,-3.69477); markerArray[3] = new google.maps.LatLng(40.40672,-3.68327); markerArray[4] = new google.maps.LatLng(40.43672,-3.62093); markerArray[5] = new google.maps.LatLng(40.46725,-3.67443); markerArray[6] = new google.maps.LatLng(40.43794,-3.67228); markerArray[7] = new google.maps.LatLng(40.46212,-3.69166); markerArray[8] = new google.maps.LatLng(40.41926,-3.70445); markerArray[9] = new google.maps.LatLng(40.42533,-3.6844); function initialize() { var mapOptions = { zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(40.4167754,-3.7037901999999576) }; map = new google.maps.Map(document.getElementById('map'),mapOptions); for (var i = 0; i < markerArray.length; i++) { addMarker(); } } // 마커 추가 function addMarker() { var marker = new google.maps.Marker({ position: markerArray[iterator], map: map, draggable: false, icon: iConArray[iterator] }); markers.push(marker); var infowindow = new google.maps.InfoWindow({ content: contentArray[iterator] }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); iterator++; } google.maps.event.addDomListener(window, 'load', initialize); //--> </SCRIPT> <body> <div id="map" style="width:760px;height:400px;margin-top:20px;"></div> </body> </html>


댓글()

구글맵 v3 맵상에 보여지는 마커만 생성하기

Open API/Google|2016. 12. 12. 18:27
반응형

개발 중 맵상에 수백 수만개의 마커를 생성해야하는 경우가 당연히(?) 발생됩니다.

이때 버버벅...리소스를 엄청나게 먹으면서 느려질수가 있는데요. 이럴 때 사용할수 있는 샘플입니다.


기존 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 소스에다가 추가했습니다.


현재 보여지는 맵상에 좌측상단 좌표와 우측하단 좌표를 읽어와서 해당 범위내에 있는 마커만 보여지도록 하고

맵이 확대/축소되거나 좌표가 이동하는 경우에 마커를 다시 뿌려지도록 하는 방법입니다.


기능 구현위주의 샘플이다보니 좀 다듬어야할 부분이 많지만 쓰시는분에게 떠넘기기를..^^;;

( 여기서 상황에 따라 고민해야할 내용으로... 이걸 Js에서 처리할지..DB에서 처리할지.. )



주요 내용으로는 :


1. 이벤트 리스너 추가를 통해 현재 맵 범위좌표 확인.  ( 하단 참고 Url을 보시면 관련 내용에 대한 링크가 있습니다. )


google.maps.event.addListener(map, 'idle', function(){
    startLat = map.getBounds().getSouthWest().lat();
    startLng = map.getBounds().getSouthWest().lng();
    endLat = map.getBounds().getNorthEast().lat();
    endLng = map.getBounds().getNorthEast().lng(); 
});


2. 마커 생성시 위경도 좌표를 비교하여 생성유무 확인.




참고 Url : https://developers.google.com/maps/documentation/javascript/reference

필요에 따라 이벤트 리스너를 추가해주시면 됩니다. 

샘플상에는 처음 로드 , 드래그 , 줌아웃 시에 좌표를 확인해여 재생성하도록 되어있습니다.

이벤트 리스너 추가시 서로 중첩되는 내용이 있는 경우 마커 생성 함수가 여러번 호출되어 더 느려질수 있습니다. 

고민+고민이 필요합니다.

댓글()