CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markers
joh-3
joh-3

Reputation:

Showing many markers in Google Maps

I have this map and want to display a whole bunch of markers. But I need to find a way of showing this in an orderly fashion, and well... something cool would be nice. Good thing is that Google Maps has many cool features. But I am new to its use and most likely not aware of cool options to organize markers and content. I just stumbled upon one neat way, which I will post below.

But in order to learn about solutions that others have found / created, my question is: what are cool ways of showing a large group of markers?

Upvotes: 20

Views: 10151

Answers (2)

KJYe.Name
KJYe.Name

Reputation: 17169

Here is the documentation for MarkerClusterer for Google Maps V3

checkout examples MarkerClusterer for Google Maps V3 Sample Codes

It can group your markers in a way it's easier to view.

Here is an example of using 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;

Screenshot of what it looks like grouped:

enter image description here

Upvotes: 22

joh-3
joh-3

Reputation:

Here is the very fancy looking but relatively easy to code sample that made me post this message.

Google Map Slider, based on this implementation.

Features: auto-scrolling as you hover over an external area with details about what is in the map. Allows you to post and show much more info but still relate it to the map.

Upvotes: 4

Related Questions