mardi 21 juin 2016

Google Maps JS API V3 multiple markers rendering

I'm stuck with the performance issue loading 2000 markers on google map. This question is overview can be found in many places, but still, can't figure out the problem for me.

So, the problem in short: google map initialization hanging the browser for 10-20 seconds.

Setting:

  • The markers data from back-end received in a single get request. loaded in 0.3 sec
  • Marker Clusterer (https://googlemaps.github.io/js-marker-clusterer/docs/examples.html) library is used. However, with or without it the browser still hanging the same time.
  • The markers are rich. with custom pics, infowindows and events.
  • InfoWindows is setting up as the AngularJS directive

Markers setup code:

function showMarkers(scope,data) {
    var locations = data;
    console.log("Starting markers setup: ", new Date());
    for(var i = 0; i < locations.length; i++) {

        var MarkerImage = '/img/reasestate.png';
        markers[i] = new google.maps.Marker({
            position: {lat:locations[i].latitude, lng:locations[i].longtitude},
            map: map,
            id: locations[i].id,
            icon: MarkerImage
        });


        var infowindow = new google.maps.InfoWindow();
        var contentString = '<infowindow></infowindow>';
        var compiled = $compile(contentString)(scope);

        google.maps.event.addListener(markers[i], 'click', (function(i, scope) {
            return function(){
                scope.placeInfo = null;

                //for search around
                scope.condo_LatLng = new google.maps.LatLng(locations[i].latitude,locations[i].longtitude);

                //update scope
                scope.$apply();

                //////////////////
                ///INFOWINDOW SETUP
                ///////////////////
                //you can change url to your url . '/maps/api/getcondo?CondoID='+scope.place.id'
                $http.get('/maps/api/condo/items?CondoID='+locations[i].id).then(function(success) {
                    //a bit of additional received data processing, not important.
                }, function(error) {
                }).finally(function() {})
            };
        })(i, scope, locations[i]));
    }
    setClustering(markers);
    console.log("Finished markers setup: ", new Date());

    /////////////
    ///context menu
    ////////////
    var menuStyle = {
        menu: 'context_menu'
        //menuSeparator: 'context_menu_separator',
        //menuItem: 'context_menu_item'
    };

    var contextMenuOptions  = {
        classNames: menuStyle,
        menuItems: [
            { label:'Add your condo...', id:'menu_option1',
                className: 'menu_item', eventName:'option1_clicked' },
            { label:'Exit', id:'menu_option2',
                className: 'menu_item', eventName:'option2_clicked' }
        ],
        pixelOffset: new google.maps.Point(10, -5),
        zIndex: 5
    };

    var contextMenu = new ContextMenu(map, contextMenuOptions);
    google.maps.event.addListener(contextMenu, 'menu_item_selected',
        function(latLng, eventName, source){
            switch(eventName){
                case 'option1_clicked':
                    createDraggableMarker(latLng);
                    break;
                case 'option2_clicked':
                    // do something else
                    break;
                default: break;
            }
        });

    google.maps.event.addListener(map, 'rightclick', function(mouseEvent) {
        contextMenu.show(mouseEvent.latLng, map);
    });
}

function setClustering(markers){
    var mcOptions = {gridSize: 150};
    mc = new MarkerClusterer(map,markers, mcOptions);
}

Getting this on console.out:

Starting markers setup:  Sun Jun 19 2016 16:43:57 
jsAllMain.js:240 Finished markers setup:  Sun Jun 19 2016 16:43:57
jsAllMain.js:256 Show markers method done at:  Sun Jun 19 2016 16:43:57
jsAllMain.js:256 Initialize searchmap done at:  Sun Jun 19 2016 16:43:57

but after i get this in console.out, the browser is hanging like 10-20 seconds more until it show the map with markers.

UPDATE: The problem is with AngularJS bindings processing (infowindow directive). Any idea how to deal with it?

Aucun commentaire:

Enregistrer un commentaire