How To Handle Multiple Markers On Google Maps With Same Location?

I use Google Maps in an app and it is likely that multiple markers are attached to same location where each marker represent a person. In this situation user will not know that the

Solution 1:

Workaround I used is to display markers with same location little bit apart on map so that user gets a slight idea of multiple marker.

I keep track of markers on map and their locations on map, and whenever I want to add a marker on map I make sure that no other marker is displayed on same location. If yes, then I add an offset to location of new marker that I want to add.

staticfinalfloat COORDINATE_OFFSET = 0.00002f; // You can change this value according to your need

Below method returns the location that has to be used for new marker. This method takes as parameters new marker's current latitude and longitude.

// Check if any marker is displayed on given coordinate. If yes then decide// another appropriate coordinate to display this marker. It returns an// array with latitude(at index 0) and longitude(at index 1).privateString[] coordinateForMarker(float latitude, float longitude) {

    String[] location = newString[2];

    for (int i = 0; i <= MAX_NUMBER_OF_MARKERS; i++) {

        if (mapAlreadyHasMarkerForLocation((latitude + i
                * COORDINATE_OFFSET)
                + "," + (longitude + i * COORDINATE_OFFSET))) {

            // If i = 0 then below if condition is same as upper one. Hence, no need to execute below if condition.if (i == 0)
                continue;

            if (mapAlreadyHasMarkerForLocation((latitude - i
                    * COORDINATE_OFFSET)
                    + "," + (longitude - i * COORDINATE_OFFSET))) {

                continue;

            } else {
                location[0] = latitude - (i * COORDINATE_OFFSET) + "";
                location[1] = longitude - (i * COORDINATE_OFFSET) + "";
                break;
            }

        } else {
            location[0] = latitude + (i * COORDINATE_OFFSET) + "";
            location[1] = longitude + (i * COORDINATE_OFFSET) + "";
            break;
        }
    }

    return location;
}

// Return whether marker with same location is already on mapprivateboolean mapAlreadyHasMarkerForLocation(String location) {
    return (markerLocation.containsValue(location));
}

In above code, markerLocation is a HashMap.

HashMap<String, String> markerLocation;    // HashMap of marker identifier and its location as a string

This answer has code for android but same logic applies in iOS.

Solution 2:

Maybe you should take a look at marker clustering. It's a common solution for showing a lot of markers on the same place. Google article about it: https://developers.google.com/maps/articles/toomanymarkers

There are also existing libraries to do this, e.g.:

• https://code.google.com/p/android-maps-extensions/
• https://github.com/twotoasters/clusterkraf

Solution 3:

You could handle the click event of the (single) marker, and use it to update an element that sits outside of the Google Map canvas with the details about the people at that marker.

Solution 4:

Giving offset will make the markers faraway when the user zoom in to max. So i found a way to achieve that. this may not be a proper way but it worked very well.

for loop markers
{
 //create markerlet mapMarker =GMSMarker()
 mapMarker.groundAnchor =CGPosition(0.5, 0.5)
 mapMarker.position =//set the CLLocation//instead of setting marker.icon set the iconViewlet image:UIIMage=UIIMage:init(named:"filename")
 let imageView:UIImageView=UIImageView.init(frame:rect(0,0, ((image.width/2* markerIndex) + image.width), image.height))
 imageView.contentMode = .Right
 imageView.image = image
 mapMarker.iconView = imageView
 mapMarker.map = mapView
}

set the zIndex of the marker so that you will see the marker icon which you want to see on top, otherwise it will animate the markers like auto swapping. when the user tap the marker handle the zIndex to bring the marker on top using zIndex Swap.

Solution 5:

Inspired by the Geek's answer, I created a function. This function returns a new latitude longitude pair, nearby the original value, almost in a circular fashion. COORINDATE_OFFSET is adjustable based on the need.

privatestaticfinalfloat COORDINATE_OFFSET = 0.000085f;
private ArrayList<LatLng> markerCoordinates = new ArrayList<>();
privateint offsetType = 0;

private LatLng getLatLng(LatLng latLng){

    LatLng updatedLatLng;

    if (markerCoordinates.contains(latLng)) {
        double latitude = 0;
        double longitude = 0;
        if (offsetType == 0) {
            latitude = latLng.latitude + COORDINATE_OFFSET;
            longitude = latLng.longitude;
        } elseif (offsetType == 1) {
            latitude = latLng.latitude - COORDINATE_OFFSET;
            longitude = latLng.longitude;
        } elseif (offsetType == 2) {
            latitude = latLng.latitude;
            longitude = latLng.longitude + COORDINATE_OFFSET;
        } elseif (offsetType == 3) {
            latitude = latLng.latitude;
            longitude = latLng.longitude - COORDINATE_OFFSET;
        } elseif (offsetType == 4) {
            latitude = latLng.latitude + COORDINATE_OFFSET;
            longitude = latLng.longitude + COORDINATE_OFFSET;
        }
        offsetType++;
        if (offsetType == 5) {
            offsetType = 0;
        }


        updatedLatLng = getLatLng(newLatLng(latitude, longitude));

    } else {
        markerCoordinates.add(latLng);
        updatedLatLng = latLng;
    }
    return updatedLatLng;
}