Click here to Skip to main content
14,333,637 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi,
I have a map that shows up to 30,000 markers, all loaded from the store database table upon user query. but normaly it shows upto 1000 markers.

Problem:

Some latitude and longitude in database are duplicate, which are needed. when these are plotted on the map they overlapping each other. Resulting the user cant see all the markers, these need to be clicked by the user to show more info and etc.

Question:
Is is possible to show on the map, those hidden markers?

Thanks.

What I have tried:

var map;

//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};

//global infowindow
var infowindow = new google.maps.InfoWindow();

//geocoder
var geocoder = new google.maps.Geocoder(); 

var address = new Array("1000 Market St, Philadelphia, PA","1000 Market St, Philadelphia, PA","1002 Market St, Philadelphia, PA","1004 Market St, Philadelphia, PA");
var content = new Array("1","2","3","4");

var min = .999999;
var max = 1.000001;

    function createMarker(latlng,text) {

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //final position for marker, could be updated if another marker already exists in same position
        var finalLatLng = latlng;

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
            for (i=0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                //if a marker already exists in the same position as this marker
                if (latlng.equals(pos)) {

                    //update the position of the coincident marker by applying a small multipler to its coordinates
                    var newLat = latlng.lat() * (Math.random() * (max - min) + min);
                    var newLng = latlng.lng() * (Math.random() * (max - min) + min);

                    finalLatLng = new google.maps.LatLng(newLat,newLng);

                }                   
            }
        }

        var marker = new google.maps.Marker({
            position: finalLatLng
        });     

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

        return marker;
    }

function geocodeAddress(address,i) {

    geocoder.geocode( {'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            var marker = createMarker(results[0].geometry.location,content[i]);
            mc.addMarker(marker);

        } else { 
            alert("Geocode was not successful for the following reason: " + status); 
        } 
    });
}

function initialize(){

    var options = { 
        zoom: 13, 
        center: new google.maps.LatLng(39.96225,-75.13222), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map'), options); 

    //marker cluster
    mc = new MarkerClusterer(map, [], mcOptions);

    for (i=0; i<address.length;>
        geocodeAddress(address[i],i);
    }

}       
Posted
Updated 29-Jun-16 0:57am
v3

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

By add number on each marker.
for (var i = 0; i < filtered.length; i++) {
                var item = records[filtered[i]];
                chosenRecords += "," + item.lat ;
                chosenRecords1 += "," + item.lng;
                dup = item.cnt;
                recordCont += item.cnt;
                if (filtered.length <= 30000) {                    
                    if (dup == 1) {
                        dup = '';
                    }
                    var img;
                    if (dup > 5) {
                        img = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|a15ecb|FFFFFF';
                    }
                    else {
                        img = ((item.status == "RES") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|6abf24|FFFFFF' : (item.status == "NON") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|0061e2|FFFFFF' : (item.status == "OCP") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|e27500|FFFFFF' : (item.status == "DEC") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|eed100|FFFFFF' : (item.status == "???") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|FF0000|FFFFFF' : 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|FF0000|FFFFFF');
                    }
                    var Mrkr_txt = item.status;
                    if (dup > 1) {
                        Mrkr_txt = 'Multiple Properties'
                    }
                  //  var lb = ''+dup+''
                    var marker = new google.maps.Marker({
                         position: new google.maps.LatLng(item.lat, item.lng),
                       //  icon: ((item.status == "RES") ? markerIcon1 : (item.status == "NON") ? markerIcon2 : (item.status == "OCP") ? markerIcon3 : (item.status == "DEC") ? markerIcon4 : (item.status == "???") ? markerIcon5 : markerIcon5),                       
                        //label: lb,
                         icon: img,
                        title: Mrkr_txt,
                        map: map,                       
                    });
});
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100