android – How to handle multiple markers on Google Maps with same location?-ThrowExceptions

Exception or error:

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 there are other markers/persons behind this particular marker.

I looked around to handle this situation and one question on SO suggests that I can display a single marker and associate all persons with that single marker. When user taps that marker I should display a list of all the user associated with that marker. This is a good workaround but I would want to avoid displaying a view that mostly hides Google Maps.

Has anyone used any workaround in similar situation?

How to solve:

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.

static final float 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).
private String[] coordinateForMarker(float latitude, float longitude) {

    String[] location = new String[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 map
private boolean 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.

###

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.:

###

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.

###

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 marker
 let mapMarker = GMSMarker()
 mapMarker.groundAnchor = CGPosition(0.5, 0.5)
 mapMarker.position = //set the CLLocation
 //instead of setting marker.icon set the iconView
 let 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.

###

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.

private static final float COORDINATE_OFFSET = 0.000085f;
private ArrayList<LatLng> markerCoordinates = new ArrayList<>();
private int 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;
        } else if (offsetType == 1) {
            latitude = latLng.latitude - COORDINATE_OFFSET;
            longitude = latLng.longitude;
        } else if (offsetType == 2) {
            latitude = latLng.latitude;
            longitude = latLng.longitude + COORDINATE_OFFSET;
        } else if (offsetType == 3) {
            latitude = latLng.latitude;
            longitude = latLng.longitude - COORDINATE_OFFSET;
        } else if (offsetType == 4) {
            latitude = latLng.latitude + COORDINATE_OFFSET;
            longitude = latLng.longitude + COORDINATE_OFFSET;
        }
        offsetType++;
        if (offsetType == 5) {
            offsetType = 0;
        }


        updatedLatLng = getLatLng(new LatLng(latitude, longitude));

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

Leave a Reply

Your email address will not be published. Required fields are marked *