Smashinglabs

gMap Labs

Welcome to my gMap playground. I'm working on new features here. Feel free to test them or to suggest new idea at idea.informer.com. Don't be suprised if something is broken.

• Clustering
• Autozoom
• Marker keys
• Easy resizing
• Roadmap

Go to github and grab alpha version

Clustering

Planned for: 3.3.0

Handling large amount of markers with Google Maps may be tricky. I'm working on clustering option, so markers could be grouped into larger clusters. Mouse over one of orange markers to see number of markers inside.

I optimised clustering, so it can handle enormous amounts of markers.
Check out 100K example here and memory usage graph:

Above chart was based on Google Chrome 11 on Windows 7, memory usage is approximate and based on task manager.

There is a great book "Beginning Google Maps API 3" by Gabriel Svennerberg. In chapter about clustering he uses MarkerClusterer script and states that:

10000+ - This cluster will probably never be used. Using this amount of markers will be painfully slow in all browsers and will probably make IE crash.

So, here you are, up to few million markers working like charm. (Book is still great, and you can check Gabriels comparison of clustering solutions).

        
var random = [];
for(var i = 0; i < 1000; i+=1) {
            random.push({
                latitude: 180*Math.random() - 90,
                longitude: 360*Math.random() - 180
            });
        }


$("#map1").gMap({
markers: random,
zoom: 1,
latitude: 0.1,
longitude: 0.1,
clustering: true, // enable clustering
fastClustering: true, // greedy cluster assignment
clusterSize: 40 //radius as % of viewport width
});
        
    

Autozoom

Planned for: 3.2.0

With fit options you now don't have to worry about centering map. Setting latitude or longitude to "fit" will calculate center of rectangle containing all markers. You can see how I add blue X marker with onComplete callback. Using zoom: "fit" is replacement for (broken?) map.fitBounds() provided by Google Maps API. Using this option you will usually get zoom one level lower than actually needed. It's like that on purpose, to avoid some edge cases.

        
var map2 = $("#map2");
map2.gMap({
    markers: [
            {
                latitude: 50.083,
                longitude: 19.917,
            },
            {
                latitude: 50.20917,
                longitude: 19.75435,
            },
            {
                latitude: 50.502343,
                longitude: 19.91243,
            }
        ],
    zoom: "fit",
    latitude: "fit",
    longitude: "fit",
    onComplete: function() {
        var center = map2.data('gmap').gmap.getCenter();
        map2.gMap('addMarker', {
            latitude: center.lat(),
            longitude: center.lng(),
            icon: {
                image: "http://thydzik.com/thydzikGoogleMap/markerlink.php?text=X&color=5680FC",
            }
        });
    }
});
        
    

Marker keys

Every marker may have assigned key. It allows you to use getMarker function. While it was already possible to get markers from gMap, it was not very elegant. Now marker is more accessible and with Google Maps API you can do some trocks like this:

        
var keyNum = 1;
var changeMarker = function () {
    map3.gMap('getMarker', 'key' + keyNum).setIcon("http://www.google.com/mapfiles/marker.png");
    keyNum += 1;
    if(keyNum > 3) {keyNum = 1; }
    map3.gMap('getMarker', 'key' + keyNum).setIcon("http://thydzik.com/thydzikGoogleMap/markerlink.php?text=X&color=5680FC");

    window.setTimeout(changeMarker, 1000);
};

var map3 = $("#map3");
    map3.gMap({
        markers: [
                {
                    latitude: 50.083,
                    longitude: 19.917,
                    key: 'key1'
                },
                {
                    latitude: 50.20917,
                    longitude: 19.75435,
                    key: 'key2'
                },
                {
                    latitude: 50.502343,
                    longitude: 19.91243,
                    key: 'key3'
                }
            ],
        zoom: "fit",
        latitude: "fit",
        longitude: "fit",
        onComplete: function() {
            changeMarker();
        }
    });
});
         
    

Easy resizing

To make life easier, there is a new function fixing all issues described in examples.
Call $('#map').gMap('fixAfterResize'); or $('#map').gMap('fixAfterResize', true); to fix resized map. Optional flag (true) enables ugly hack for rapid centering instead of default, smooth one.

Resize map
Repair (smooth centering) Repair (rapid centering)

        
var map4 = $('#map4');
map4.gMap({
    markers: [
            {
                latitude: 50.083,
                longitude: 19.917
            },
            {
                latitude: 50.20917,
                longitude: 19.75435
            },
            {
                latitude: 50.502343,
                longitude: 19.91243
            }
        ],
    zoom: "fit",
    latitude: "fit",
    longitude: "fit"
});

$('#resize').click(function (e) {
    map4.height(map4.height() + 300);
    e.preventDefault();
});

$('#repair').click(function (e) {
    map4.gMap('fixAfterResize');
    e.preventDefault();
});

$('#repair_ugly').click(function (e) {
    map4.gMap('fixAfterResize', true);
    e.preventDefault();
});
         
    

Roadmap

Planned for 3.2.0 (current status: released):

• zoom: 'fit' - calculating optimal zoom level for markers
• latitude/longitude: 'fit' - calculating optimal map center for markers
• keys for markers and functions like getMarker(key)
• setCenter - set marker key to center map on

Planned for 3.3.0 (current status: released):

• Clustering - handling large amount of markers
• Draw route between two markers (by key)
• Get directions from given address to marker
• Repair map after resizing
• Custom popups

Not scheduled:

• Voronoi diagrams
• Overlays