Google Maps API v2: How to make markers clickable?
How to I make the markers in Android Google Maps API v2 become clickable so they will either bring up a menu with options or just start a new activity? I believe I made the markers in my app currently in a "newb" method. I didn't assign them a name or a method to be able to link it in with the rest of the required code.
googleMap.addMarker(new MarkerOptions()
.position(latLng)
.title("My Spot")
.snippet("This is my spot!")
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
If you ANSWER this, please include a sample code of a marker being introduced with a unique name and then being set as clickable to open a new activity.
All markers in Google Android Maps Api v2 are clickable. You don't need to set any additional properties to your marker. What you need to do - is to register marker click callback to your googleMap and handle click within callback:
public class MarkerDemoActivity extends android.support.v4.app.FragmentActivity
implements OnMarkerClickListener
{
private Marker myMarker;
private void setUpMap()
{
.......
googleMap.setOnMarkerClickListener(this);
myMarker = googleMap.addMarker(new MarkerOptions()
.position(latLng)
.title("My Spot")
.snippet("This is my spot!")
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
......
}
@Override
public boolean onMarkerClick(final Marker marker) {
if (marker.equals(myMarker))
{
//handle click here
}
}
}
here is a good guide on google about marker customization
setTag(position) while adding marker to map.
Marker marker = map.addMarker(new MarkerOptions()
.position(new LatLng(latitude, longitude)));
marker.setTag(position);
getTag() on setOnMarkerClickListener listener
map.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
@Override
public boolean onMarkerClick(Marker marker) {
int position = (int)(marker.getTag());
//Using position get Value from arraylist
return false;
}
});
Avoid using Activity implements OnMarkerClickListener, use a local OnMarkerClickListener
// Not a good idea
class MapActivity extends Activity implements OnMarkerClickListener {
}
You will need a map to lookup the original data model linked to the marker
private Map<Marker, Map<String, Object>> markers = new HashMap<>();
You will need a data model
private Map<String, Object> dataModel = new HashMap<>();
Put some data in the data model
dataModel.put("title", "My Spot");
dataModel.put("snipet", "This is my spot!");
dataModel.put("latitude", 20.0f);
dataModel.put("longitude", 100.0f);
When creating a new marker using a data model add both to the maker map
Marker marker = googleMap.addMarker(markerOptions);
markers.put(marker, dataModel);
For on click marker event, use a local OnMarkerClickListener:
@Override
public void onMapReady(GoogleMap googleMap) {
// grab for laters
this.googleMap = googleMap;
googleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
@Override
public boolean onMarkerClick(Marker marker) {
Map dataModel = (Map)markers.get(marker);
String title = (String)dataModel.get("title");
markerOnClick(title);
return false;
}
});
mapView.onResume();
showMarkers();
ZoomAsync zoomAsync = new ZoomAsync();
zoomAsync.execute();
}
For displaying the info window retrieve the original data model from the marker map:
@Override
public void onMapReady(GoogleMap googleMap) {
this.googleMap = googleMap;
googleMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() {
@Override
public void onInfoWindowClick(Marker marker) {
Map dataModel = (Map)markers.get(marker);
String title = (String)dataModel.get("title");
infoWindowOnClick(title);
}
});
Another Solution : you get the marker by its title
public class MarkerDemoActivity extends android.support.v4.app.FragmentActivity implements OnMarkerClickListener
{
private Marker myMarker;
private void setUpMap()
{
.......
googleMap.setOnMarkerClickListener(this);
myMarker = googleMap.addMarker(new MarkerOptions()
.position(latLng)
.title("My Spot")
.snippet("This is my spot!")
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
......
}
@Override
public boolean onMarkerClick(final Marker marker)
{
String name= marker.getTitle();
if (name.equalsIgnoreCase("My Spot"))
{
//write your code here
}
}
}
Here is my whole code of a map activity with 4 clickable markers. Click on a marker shows an info window, and after click on info window you are going to another activity: English, German, Spanish or Italian. If you want to use OnMarkerClickListener in spite of OnInfoWindowClickListener, you just have to swap this line:
mMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener()
to this:
mMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener()
this line:
public void onInfoWindowClick(Marker arg0)
to this:
public boolean onMarkerClick(Marker arg0)
and at the end of the method "onMarkerClick":
return true;
I think it may be helpful for someone ;)
package pl.pollub.translator;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.widget.Toast;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
private GoogleMap mMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
Toast.makeText(this, "Choose a language.", Toast.LENGTH_LONG).show();
}
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
mMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener()
{
@Override
public void onInfoWindowClick(Marker arg0) {
if(arg0 != null && arg0.getTitle().equals("English")){
Intent intent1 = new Intent(MapsActivity.this, English.class);
startActivity(intent1);}
if(arg0 != null && arg0.getTitle().equals("German")){
Intent intent2 = new Intent(MapsActivity.this, German.class);
startActivity(intent2);}
if(arg0 != null && arg0.getTitle().equals("Italian")){
Intent intent3 = new Intent(MapsActivity.this, Italian.class);
startActivity(intent3);}
if(arg0 != null && arg0.getTitle().equals("Spanish")){
Intent intent4 = new Intent(MapsActivity.this, Spanish.class);
startActivity(intent4);}
}
});
LatLng greatBritain = new LatLng(51.30, -0.07);
LatLng germany = new LatLng(52.3107, 13.2430);
LatLng italy = new LatLng(41.53, 12.29);
LatLng spain = new LatLng(40.25, -3.41);
mMap.addMarker(new MarkerOptions()
.position(greatBritain)
.title("English")
.snippet("Click on me:)"));
mMap.addMarker(new MarkerOptions()
.position(germany)
.title("German")
.snippet("Click on me:)"));
mMap.addMarker(new MarkerOptions()
.position(italy)
.title("Italian")
.snippet("Click on me:)"));
mMap.addMarker(new MarkerOptions()
.position(spain)
.title("Spanish")
.snippet("Click on me:)"));
mMap.moveCamera(CameraUpdateFactory.newLatLng(greatBritain));
mMap.moveCamera(CameraUpdateFactory.newLatLng(germany));
mMap.moveCamera(CameraUpdateFactory.newLatLng(italy));
mMap.moveCamera(CameraUpdateFactory.newLatLng(spain));
}
}