CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Anil
Anil

Reputation: 385

Merge tool tip of overlapping Markers on Google Map

Currently, I am displaying 500-600 Markers on Google map, with their names as tooltip. Now, I need to display the tool-tip of all overlapping markers as comma-separated i.e. Marker1, Marker2, Marker3 etc. if Marker1, Marker2, Marker3 are overlapped on map.

I found many other different examples on google map at internet especially at GeoCodeZip, but not of my requirement.

if this requirement is once filled, Am afraid of performance issues on zoom changed events, as tooltip needed to be updated (if overlapping is changed).

Update1 : I have already show Overlapping Marker spiderfier to client but not acceptable.

Does anyone have right path or working example ?

Thanks -Anil

Upvotes: 0

Views: 1164

Answers (1)

Brian
Brian

Reputation: 461

The core of this is to find the pixel distance between LatLngs. Then before adding each marker check the pixel distance between it and any existing markers. If there is another marker nearby add to the title otherwise create a new marker. jsFiddle

function init() {
var mapOptions = {
    center: new google.maps.LatLng(0, -0),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

// to get the pixel position from the latlng
// https://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

google.maps.event.addListenerOnce(map, 'idle', function() {
    if (overlay.getProjection()) {
        var points = [
            { latlng: new google.maps.LatLng(40, -100), title: '1' },
            { latlng: new google.maps.LatLng(40.125, -100.125), title: '2' },
            { latlng: new google.maps.LatLng(40.25, -100.25), title: '3' },
            { latlng: new google.maps.LatLng(40.5, -100.5), title: '4' },
            { latlng: new google.maps.LatLng(40.75, -100.75), title: '5' },
            { latlng: new google.maps.LatLng(41, -101), title: '6' },
            { latlng: new google.maps.LatLng(35, -95), title: '7' },
            { latlng: new google.maps.LatLng(45, 105), title: '8' },
            { latlng: new google.maps.LatLng(25, -115), title: '9' },
            { latlng: new google.maps.LatLng(55, -85), title: '10' },
            { latlng: new google.maps.LatLng(30, -34), title: '11' }
        ];

        // for each point           
        var markers = [];
        points.forEach(function (point) {
            var nearby = false;
            var pointPixelPosition =  overlay.getProjection().fromLatLngToContainerPixel(point.latlng);
            markers.forEach(function(marker) {
                var markerPixelPosition = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
                // check for marker 'near by'
                if (Math.abs(pointPixelPosition.x - markerPixelPosition.x) < 10 || Math.abs(pointPixelPosition.y - markerPixelPosition.y) < 10) {
                    nearby = true;
                    marker.setTitle(marker.getTitle() + ', ' + point.title);
                }
            });

            // create new marker
            if (!nearby) {
                markers.push(new google.maps.Marker({ map: map, position: point.latlng, title: point.title }));
            }
        });
    }

    map.setCenter(new google.maps.LatLng(39.8282, -98.5795));
});
}

Upvotes: 2

Related Questions