Icons sloooowwwww ...

[fdl333]

Hy there.. spent a couple of hours setting up your wonderful icons, then did a test run ... I have to load about 2.000 and it takes about 2 minutes !!!

[scottdejonge]

Can you provide more detail? If you are loading 2000 markers onto a Google Map it is going to be slow unless you do any clustering or optimisation.

[fdl333]

Thanks for your reply Scott.

This is my problem: I have to represent about 2000 users and 1000 companies on the map.

I am using only two different icons (one for users and one for companies), but in 3 different backgrounds:

• Green for active
• Orange for expired
• Blue for never contacted

Is there anyway I can pre-create thes 6 (2 x 3) icons so that they load much faster??

(actually, I also need an icon for schools and one for teachers but there’s only about 10 of those so I don’t expect problems …)

At present, my code (just for the users) is :

I get a json reply with all the cnt objects and just create them like this …

function cnt (item) {
    this.contactId  = item.contactid;
    this.name       = item.name;
    this.city       = item.city;
    this.sede       = item.sede;
    this.lat        = item.lat;
    this.lng        = item.lng;
    this.cntStat    = item.cntStat;
    this.visible    = true;
    this.marker     = null;
    this.gLatLng    = new google.maps.LatLng(item.geoLat, item.geoLng);
    this.markerLet  = '';
    this.markerCol  = '';
    this.explain    = '';
    this.icon       = null;
    this.iconUrl    = '';

    switch (this.cntStat) {

        case 'V':   this.markerCol = 'FF0000';  this.explain = 'Current';   break;

        case 'X':   this.markerCol = 'FFCC00';  this.explain = 'Expired';   break;

        case 'N':   this.markerCol = 'FFFF00';  this.explain = 'Never';     break;

    }

    this.marker = new Marker({

        position:   new google.maps.LatLng(this.lat, this.lng)

    ,   map:        map

    ,   title:      this.name

    ,   icon: {

            path: MAP_PIN

        ,   fillColor: '#' + this.markerCol

        ,   fillOpacity: 1

        ,   strokeColor: ''

        ,   strokeWeight: 0

        }

    ,    map_icon_label: '<span class="map-icon map-icon-university"></span>'

    });

    /***

    * STUDENT :  map-icon-university                    MAP_PIN

    * TEACHER :  map-icon-courthouse                    SHIELD

    * SCHOOL :   map-icon-museum                        SQUARE_PIN

    * RED x Shenker

    * 

    * COMPAYT:   map-icon-political                      ROUTE

    * 

    * 

    */

    google.maps.event.addListener(

        this.marker

        ,   'click'

        ,   function () {

                for (i=0; i<cntArr.length; i++) {

                    if (cntArr[i].marker == this) {

                        infoWindow.setContent(cntArr[i].getInfoContent());

                        infoWindow.open(map, this);

                       return;

                    }

                }

            }

    );

}

[scottdejonge]

That looks like it has a lot more to do with how you are managing 200 marker objects with Google Maps. The source SVG files are included in the repo and you are more than welcome to use them individually considering you only require 3 icons.

I would advise looking into marker clustering to optimise how many markers are being rendered in Google Maps. That should increase performance.