Отображение множества маркеров в Картах Google

У меня есть эта карта и вы хотите отобразить целую кучу маркеров. Но мне нужно найти способ показать это упорядоченным образом, и хорошо... что-то классное было бы хорошо. Хорошо, что в Google Maps много интересных функций. Но я новичок в ее использовании и, скорее всего, не знаю о хороших вариантах для организации маркеров и контента. Я просто наткнулся на один аккуратный способ, который я опубликую ниже.

Но для того, чтобы узнать о решениях, которые нашли/создали другие, мой вопрос: какие классные способы показать большую группу маркеров?

Ответ 1

Вот документация для MarkerClusterer для Карт Google V3

примеры выписки МаркерClusterer для Google Maps V3 Примеры кодов

Он может группировать маркеры таким образом, чтобы их было легче просмотреть.

Вот пример использования MarkerClusterer JSFiddle Demo.

var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']];  //create global array to store points

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 50,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for(var i=0; i<myPoints.length; i++){
         createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
    }

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red10.png',
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    marker.setAnimation(google.maps.Animation.BOUNCE);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

window.onload = initialize;

Снимок экрана о том, как он выглядит сгруппированным:

Ответ 2

Вот очень причудливый, но относительно простой пример кода, который заставил меня опубликовать это сообщение.

Google Map Slider, на основе эта реализация.

Особенности: автопрокрутка при наведении курсора на внешнюю область с подробностями о том, что находится на карте. Позволяет публиковать и показывать гораздо больше информации, но при этом привязывать ее к карте.