Android – Maps API v2 with different marker actions

androidgoogle mapsgoogle-maps-markers

I'm trying to port my application to the new Google Maps API v2, but i'm having trouble when interacting with markers.

My context: I have a map showing buses and buses stop. With the old library I had my own ItemizedOverlay for bus stops and another one for buses. Each one had a different OnTapListener (actually I use an external library to show balloons), so when the user taps the bus marker nothing happens, but when he taps the bus stop marker an activity with its information is opened. Also, in my ItemizedOverlay I mapped each marker with its bus stop object of the model.

Now with the new API I have 2 main problems:

You set a listener with setOnInfoWindowClickListener() or setOnMarkerClickListener() methods of your GoogleMap object. In other words, you can only set one listener for the whole maps, so I can't differentiate between taps on bus stops or buses.
The onClick method of both markers receive only the Marker object, from where I can't get too much information like the bus stop number to open its activity (and I hope there is a better way than parsing the title String! O_O)

I think these two problems could be resolved using different subclases of Marker, but it has no constructor and you get its reference when adding it to the map, so I don't know if it's possible to use a custom implementation.

The API is new so there isn't much information on the web about similar problems. I've been trying to figure out how to solve this, but I got nothing. Does anyone know a possible solution to this?

Thanks.

EDIT: A screenshot from my current application's map with two types of markers:

Best Answer

I have run into this problem as well. My solution was:

private Map<Marker, MyModel> markerMap = new HashMap<>();
private GoogleMap mMap;

private void doMarkers(){
    MarkerOptions opt = new MarkerOptions();
    //Fill out opt from MyModel
    Marker marker = mMap.addMarker(opt);
    markerMap.put(marker, myModel);
}

and then in the OnMarkerClickListener callback, pull your model out of the HashMap using the clicked marker. There is also a method Marker.getId() which for some reason returns a string. I don't understand why you can't specify an int id when you make the marker, or why you can't access the marker object before you add it to the map.

UPDATE: After almost 4 years Google have added a method Marker.setTag(Object tag) to associate arbitrary data with a marker.

Related Solutions

Google-maps – How to change the color of a Google Maps marker

With version 3 of the Google Maps API, the easiest way to do this may be by grabbing a custom icon set, like the one that Benjamin Keen has created here:

http://www.benjaminkeen.com/google-maps-coloured-markers/

If you put all of those icons at the same place as your map page, you can colorize a Marker simply by using the appropriate icon option when creating it:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

This is super-easy, and is the approach I'm using for the project I'm working on currently.

Javascript – Google Maps JS API v3 – Simple Multiple Marker Example

This is the simplest I could reduce it to:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

👨‍💻 Edit/fork on a Codepen →

SCREENSHOT

Google Maps Multiple Markers

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction if it is the case:

❯ Mozilla Dev Center: Working with Closures

Best Answer

Related Solutions

Google-maps – How to change the color of a Google Maps marker

Javascript – Google Maps JS API v3 – Simple Multiple Marker Example

Related Topic