How to join multiple markers on the map with arrow headed poly-line to show directions of travelling?

Question

I am a newbie to the android and currently working on the Google-map API. I am able to plot multiple markers on the map but want to join multiple markers with poly line.I have referred this for the directions concern but it is for two points only. Below is the code for the Activity:

 public class MainActivity extends AppCompatActivity {

// Google Map
private GoogleMap googleMap;
// latitude and longitude
double latitude;
double longitude;
String newtime;
ArrayList<LatLng> points;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    points = new ArrayList<LatLng>();
    points.add(new LatLng(21.114369, 79.049423));
    points.add(new LatLng(21.113913, 79.049203));
    points.add(new LatLng(21.113478, 79.048736));
    points.add(new LatLng(21.113002, 79.048592));
    points.add(new LatLng(21.112857, 79.047315));
    points.add(new LatLng(21.112997, 79.046741));
    try {
        // Loading map
        initilizeMap();

    } catch (Exception e) {
        e.printStackTrace();
    }

    googleMap.getUiSettings().setZoomControlsEnabled(true);
    googleMap.setMyLocationEnabled(true);

    SimpleDateFormat sdfDateTime = new SimpleDateFormat("dd-MM-yy HH:mm:ss", Locale.US);
    newtime = sdfDateTime.format(new Date(System.currentTimeMillis()));

    // googleMap.addMarker(marker);
    drawMarker(points);

}

private void initilizeMap() {
    if (googleMap == null) {
        googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();

        // check if map is created successfully or not
        if (googleMap == null) {
            Toast.makeText(getApplicationContext(), "Sorry! unable to create maps", Toast.LENGTH_SHORT).show();
        }
    }
}

private void drawMarker(ArrayList<LatLng> l) {
    // Creating an instance of MarkerOptions

    for (int i = 0; i < l.size(); i++) {
        latitude = l.get(i).latitude;
        longitude = l.get(i).longitude;
        MarkerOptions marker = new MarkerOptions().position(new LatLng(latitude, longitude)).title("Bus")
                .snippet(newtime);
        marker.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE));

        // Adding marker on the Google Map
        googleMap.addMarker(marker);
    }

    CameraPosition cameraPosition = new CameraPosition.Builder()
            .target(new LatLng(l.get(0).latitude, l.get(0).longitude)).zoom(18).build();

    googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

}

@Override
protected void onResume() {
    super.onResume();
    initilizeMap();
}

}

Please help/guide me to achieve the task.

~Thanks.

Yes sir, I want to draw a poly line which is forming a route by joining every marker. — Swapnil Lanjewar, Dec 23 '15 at 07:32
Yes Locations class is used for storing the Lat-Lng points in an array list of locations points. — Swapnil Lanjewar, Dec 23 '15 at 07:38
Here, no need to create separate class na, There is once class called `LatLng` which stores these informations. — Nigam Patro, Dec 23 '15 at 07:38
I am passing the two values for plotting the marker on the map and there are multiple locations having multiple latitude and longitude thats why i am passing an array list of multiple points to the drawMarker() method. — Swapnil Lanjewar, Dec 23 '15 at 07:40
I understood, but here no need to create class `Locations` to store latitude, longitude, because android default provides `LatLng` class. — Nigam Patro, Dec 23 '15 at 07:42
Okay Sir I will change the code accordingly but the main issue is to joining the markers. — Swapnil Lanjewar, Dec 23 '15 at 07:43

score 3 · Answer 1 · answered Dec 23 '15 at 07:59

3

Modify your drawMarker() to the following:-

private void drawMarker(ArrayList<LatLng> l) {
    // Creating an instance of MarkerOptions

    PolylineOptions options = new PolylineOptions();
    options.color(Color.RED);

    for (int i = 0; i < l.size(); i++) {
        options.add(l.get(i));
        MarkerOptions marker = new MarkerOptions().position(l.get(i)).title("Bus")
                .snippet(newtime);
        marker.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE));

        // Adding marker on the Google Map
        googleMap.addMarker(marker);
    }

    googleMap.addPolyline(options);

    CameraPosition cameraPosition = new CameraPosition.Builder()
            .target(new LatLng(l.get(0).latitude, l.get(0).longitude)).zoom(18).build();

    googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

}

Here it will add lines with red color, to change colors as your wish just modify the options.color().

answered Dec 23 '15 at 07:59

Nigam Patro

2,760
1
18
33

Its good but I want to draw the lines direction wise so can you please please help me l'll more? – Swapnil Lanjewar Dec 23 '15 at 10:30
@SwapnilLanjewar You can do it, I also doesn't know, need to write custom logic, you can find reference for this http://stackoverflow.com/questions/20382823/google-maps-api-v2-draw-part-of-circle-on-mapfragment/20408460#20408460 – Nigam Patro Dec 23 '15 at 10:51
OK Sir and I am really very thankful for your support, time and precious help! – Swapnil Lanjewar Dec 23 '15 at 11:02
@SwapnilLanjewar Its my pleasure – Nigam Patro Dec 23 '15 at 11:03

How to join multiple markers on the map with arrow headed poly-line to show directions of travelling?

1 Answers1