Google지도 API가 많은 마커로 인해 느리게로드됩니다.

Question

addMarker 함수를 사용하여 페이지로드시 약 600 개의 googlemap 마커를로드하려고합니다.

페이지로드에 많은 시간이 걸립니다.

addMarker 기능을 계속 사용하면서 더 빠르게로드 할 수있는 방법이 있습니까?

감사합니다.

var map 
 
var myLatlng = new google.maps.LatLng(35.9531719,14.3712201); 
 
var markerBounds = new google.maps.LatLngBounds(); 
 
var markers = {}; 
 
\t 
 
function HomeControl(controlDiv, map) 
 
{ 
 
\t google.maps.event.addDomListener(zoomout, "click", function() { 
 
\t \t 
 
\t var currentZoomLevel = map.getZoom(); 
 
\t if(currentZoomLevel != 0) 
 
\t { 
 
\t \t map.setZoom(currentZoomLevel - 1); 
 
\t }  
 
\t }); 
 
\t 
 
\t google.maps.event.addDomListener(zoomin, "click", function() { 
 
\t \t 
 
\t var currentZoomLevel = map.getZoom(); 
 
\t if(currentZoomLevel != 21) 
 
\t { 
 
\t \t map.setZoom(currentZoomLevel + 1); 
 
\t } 
 
\t }); 
 
} 
 

 
function initialize() 
 
{ 
 
    var googleMapOptions = { 
 
    center: new google.maps.LatLng(35.9531719,14.3712201), 
 
\t zoom: 11, 
 
\t mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
\t zoomControl: false, 
 
\t streetViewControl: false, 
 
\t panControl: false, 
 
\t draggable: true 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions); 
 
    
 
    \t google.maps.event.addListener(map, "idle", function() { 
 
    \t \t addMarker(latitude,longitude,id,'Title','url'); 
 
    \t }); 
 
    
 
    var homeControlDiv = document.createElement("div"); 
 
    var homeControl = new HomeControl(homeControlDiv, map); 
 
} 
 

 
var infowindow = new google.maps.InfoWindow({ 
 
    \t content: "" 
 
\t }); 
 

 
function addMarker(lat,long,id,desc,url) 
 
{ \t 
 
\t var myIcon = new google.maps.MarkerImage("/images/pips/"+id+".png", null, null, null, new google.maps.Size(28,38)); 
 
    
 
    var myLatlng = new google.maps.LatLng(lat,long); 
 

 
\t var marker = new google.maps.Marker({ 
 
\t \t map: map, 
 
\t \t title: desc, 
 
\t \t position: myLatlng, 
 
\t \t icon: myIcon, \t \t \t \t \t \t 
 
\t \t id: id 
 
\t }); 
 
\t 
 
\t google.maps.event.addListener(marker, 'click', function() { 
 
\t \t infowindow.setContent('<a href="' + url + '">' + desc + '</a>'); 
 
\t \t infowindow.setPosition(marker.getPosition()); 
 
\t \t infowindow.open(map, marker); 
 
\t }); 
 
\t 
 
\t markers[id] = marker; 
 

 
\t markerBounds.extend(myLatlng); 
 
\t 
 
\t google.maps.event.addListener(marker, "click", function() { 
 
\t \t infowindow.open(map,marker); 
 
\t }); 
 
} \t 
 
    
 
google.maps.event.addDomListener(window, "load", initialize); 
 
</script>

Answer 1

당신은 clustering을 사용할 수 있습니다, 그것은 하나에 이웃 마커를 조인 만 줌을 확장

당신은 클라이언트 측에서 클러스터링뿐만 아니라 서버 측, 따라 할 수있는 마커의 양 ...

4000 이상인 경우 서버 클러스터링을 사용하는 것이 좋습니다. 그렇지 않으면 클라이언트가 잘 보일 것입니다.