Develop Reference

How to represent direction in a route in google maps?

In a project I'm displaying a route using PolylineOptions for drawing rects from one POI to the next POI.
Also in each POI I'm drawing a circle.
The objective is to represent the direction of the route in some way, for example, drawing an arrow in the middle of each PolylineOptions rect. The problem is that I can't find how to do this.
This is my code:
PolylineOptions rectOptions = new PolylineOptions();
float[] prevHSV = new float[3];
Color.colorToHSV(getResources().getColor(R.color.colorPrimary), prevHSV);
rectOptions.color(Color.HSVToColor(255, prevHSV));
String[][] routeInformation = ((MyApplication)getApplication()).getLineInformation(line);
ArrayList<Double[]> routeStops = Util.getFullRouteFromLine(this, line);
final LatLngBounds.Builder builder = new LatLngBounds.Builder();
for (int i=0; i<routeInformation.length; i++){
LatLng latlng = new LatLng(Double.parseDouble(routeInformation[i][0]),Double.parseDouble(routeInformation[i][1]));
builder.include(latlng);
mMap.addCircle(new CircleOptions().center(latlng).radius(15).strokeColor(Color.HSVToColor(255, prevHSV)).fillColor(Color.HSVToColor(255, prevHSV)).zIndex(7777));
}
for (Double[] pos : routeStops){
rectOptions.add(new LatLng(pos[0],pos[1])).width(5);
}
mMap.addPolyline(rectOptions);
Is there a easy way to represent the direction of a route?
Something similar to this, but this is for the web version of google maps, not for the android version: http://jsfiddle.net/nX8U8/2/

IMHO easiest way is to use flat "north-oriented" direction marker (arrow) like that:
created via vector drawable ic_arrow_up.xml:
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportHeight="560"
android:viewportWidth="560"
android:height="24dp"
android:width="24dp"
>
<path android:fillColor="#0000FF"
android:pathData="M0,559.43C0,557.943 279.994,-0.561 280.458,0C282.014,1.884 560.512,559.569 559.999,559.776C559.665,559.911 496.562,532.823 419.77,499.581C419.77,499.581 280.15,439.14 280.15,439.14C280.15,439.14 140.756,499.57 140.756,499.57C64.089,532.807 1.056,560 0.681,560C0.307,560 0,559.743 0,559.43C0,559.43 0,559.43 0,559.43Z"
/>
</vector>
placed on each path polyline segment middle point with angle calculated on segment bearing. Both polyline segment middle and bearing you can determine via SphericalUtil class of Google Maps Android API Utility Library . Bearing can be found via SphericalUtil.computeHeading() with first and second points of segment as arguments and LatLng of segment middle point - via SphericalUtil.interpolate() also with first and second points of segment as arguments from and to and constant 0.5 (half) as fraction argument.
So, with source like this:
...
#Override
public void onMapReady(GoogleMap googleMap) {
mGoogleMap = googleMap;
mGoogleMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
#Override
public void onMapLoaded() {
List<LatLng> sourcePoints = new ArrayList<>();
PolylineOptions polyLineOptions;
sourcePoints.add(new LatLng(-35.27801,149.12958));
sourcePoints.add(new LatLng(-35.28032,149.12907));
sourcePoints.add(new LatLng(-35.28099,149.12929));
sourcePoints.add(new LatLng(-35.28144,149.12984));
sourcePoints.add(new LatLng(-35.28194,149.13003));
sourcePoints.add(new LatLng(-35.28282,149.12956));
sourcePoints.add(new LatLng(-35.28302,149.12881));
sourcePoints.add(new LatLng(-35.28473,149.12836));
polyLineOptions = new PolylineOptions();
polyLineOptions.addAll(sourcePoints);
polyLineOptions.width(10);
polyLineOptions.color(Color.BLUE);
mGoogleMap.addPolyline(polyLineOptions);
mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sourcePoints.get(0), 15));
for (int i = 0; i < sourcePoints.size() - 1; i++) {
// get first and second points of polyline segment
LatLng segmentP1 = sourcePoints.get(i);
LatLng segmentP2 = sourcePoints.get(i+1);
// calculate middle point
LatLng segmentMiddlePoint = SphericalUtil.interpolate(segmentP1, segmentP2, 0.5);
// calculate bearing
float segmentBearing = (float) SphericalUtil.computeHeading(segmentP1, segmentP2);
// add flat marker at segment middle
addDirectionMarker(segmentMiddlePoint, segmentBearing);
}
});
}
...
public void addDirectionMarker(LatLng latLng, float angle) {
Drawable circleDrawable = ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_arrow_up);
BitmapDescriptor markerIcon = getMarkerIconFromDrawable(circleDrawable, 30, 30);
mGoogleMap.addMarker(new MarkerOptions()
.position(latLng)
.anchor(0.5f, 0.5f)
.rotation(angle)
.flat(true)
.icon(markerIcon)
);
}
you'll got something like that:
Also you can change size of arrows markers by set other values than 30, 30 in
BitmapDescriptor markerIcon = getMarkerIconFromDrawable(circleDrawable, 30, 30);
line.

GoogleMaps draw multiple polylines even i am removing the previous polyline before plotting new one

I am using google maps and drawing polylines on it by passing array of coordinates on each location update. After plotting the polyline i first remove the previous one and then i am plotting new polyline based on updated coordinates array list. Problem is, google maps is plotting a separate polyline from starting to end point on each location update.
I know mistake is somewhere in the hierarachy of calling things. Can anybody help me figuring this out.
This is the method in which i am updating the camera focus and plotting polylines.
private void moveCamera(Location location) {
if (location != null) {
if (polyline != null) {
polyline.remove();
}
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(
new LatLng(location.getLatitude(), location.getLongitude()), 16));
coordList.add(new LatLng(location.getLatitude(), location.getLongitude()));
// Create polyline options with existing LatLng ArrayList
polylineOptions.addAll(coordList);
polylineOptions
.width(5)
.color(Color.RED);
// Adding multiple points in map using polyline and arraylist
polyline = mMap.addPolyline(polylineOptions);
}
}

just call
polylineOptions.clear(); -> delete current object
and
map.clear() -> invalidate map
before add new polyline

Got the Solution. I was using the same old PolylineOptions again and again by declaring it as global variable. Now before each plot i create a new instance of PolylineOptions and now good to go.
Here is the updated code.
private void moveCamera(Location location) {
if (location != null) {
if (polyline != null) {
polyline.remove();
}
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(
new LatLng(location.getLatitude(), location.getLongitude()), 16));
coordList.add(new LatLng(location.getLatitude(), location.getLongitude()));
polyline = mMap.addPolyline(new PolylineOptions().addAll(coordList)
.width(5)
.color(Color.RED));
}
}

android detect various circles on a map v2

In my little app I have a map and i'm parsing an XML from the web, like this:
<place>
<lat>42.827602</lat>
<lon>-1.663957</lon>
<place_name>Place one</place_name>
<snippet>Snippet de place Facebook</snippet>
<thumb>http://www.animage.com/myicon1.png</thumb>
</place>
<place>
<lat>42.830750</lat>
<lon>-1.669064</lon>
<place_name>Place two</place_name>
<snippet>Snippet de place Twitter</snippet>
<thumb>http://www.animage.com/myicon2.png</thumb>
</place>
<place>
<lat>42.825333</lat>
<lon>-1.668232</lon>
<place_name>Place Three</place_name>
<snippet>Snippet de place Skype</snippet>
<thumb>http://www.animage.com/myicon3.png</thumb>
</place>
</response>
every time I read a "place" from the xml, the onPostExecute of my AsyncTask, calls the method that creates a new marker and circle on the map of my application
For example, if the xml has seven "places", the method to create a new marker and a circle is called seven times.
Marker aMarker;
Circle aCircle;
//...
public void createNewMarkerAndCircle() {
//...
aMarker = mMap.addMarker(new MarkerOptions()
.position(new LatLng(dLat, dLon))
.title(nombre_punto)
.snippet(introduccion_punto)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
aCircle = mMap.addCircle(new CircleOptions()
.center(new LatLng(dLat, dLon))
.radius(150)
.strokeColor(Color.RED)
}
//...
public void onPostExecute(String xml) {
xml = stringBuffer.toString();
try {
Document doc = parser.getDomElement(xml);
NodeList nl0 = doc.getElementsByTagName(KEY_PLACE);
Element e = (Element) nl0.item(lap);
theLat = parser.getValue(e, KEY_LATITUDE);
theLon = parser.getValue(e, KEY_LONGITUDE);
//...
createNewMarkerAndCircle();
//...
So far, everything works fine and markers and circles are created on the map.
My purpose is that when the user on the map comes within the radius of one of the circles, get the datas of the marker that is inside.
I show you what I'm doing:
I have a listener of my location that every time it´s updated, check the distance from the current location and radius of the circle.
GoogleMap.OnMyLocationChangeListener myLocationChangeListener = new GoogleMap.OnMyLocationChangeListener() {
#Override
public void onMyLocationChange(Location location) {
LatLng loc = new LatLng(location.getLatitude(), location.getLongitude());
float[] distance = new float[2];
try {
Location.distanceBetween(
location.getLatitude(),
location.getLongitude(),
aCircle.getCenter().latitude,
aCircle.getCenter().longitude, distance);
if (distance[0] > aCircle.getRadius()) {
Log.i("myLogs", "Outside");
} else {
String markerTitle;
markerTitle = aMarker.getTitle();
Log.i("myLogs", "I´ in the circle" + " " + markerTitle);
}
//....
This works fine, but with a big problem.
When I start to walk the route, only detected when I go into the last "place" parsed from xml, and therefore, the last marker and circle created.
I understand what the problem is, the last marker (Marker aMarker;) and circle (Circle aCircle;) created are those with the values assigned ... But i do not know how to fix it.
I would appreciate any help, several days ago I'm looking for solutions, but without success.
Thanks and regards.
More information:
I found this other way , but the problem remains exactly the same:
https://gist.github.com/saxman/5347195

the last marker (Marker aMarker;) and circle (Circle aCircle;)
created are those with the values assigned ... But i do not know how
to fix it.
In order to check the distance against all the points of interests you create you need to hold them in some sort of structure, the most simple being a list, to reference them later in the listener:
Marker aMarker;
Circle aCircle;
// this will hold the circles
List<Circle> allCircles = new ArrayList<Circle>();
// this will hold the markers
List<Marker> allMarkers = new ArrayList<Marker>();
public void createNewMarkerAndCircle() {
aMarker = mMap.addMarker(new MarkerOptions()
.position(new LatLng(dLat, dLon))
.title(nombre_punto)
.snippet(introduccion_punto)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE )));
// store the new marker in the above list
allMarkers.add(aMarker);
aCircle = mMap.addCircle(new CircleOptions()
.center(new LatLng(dLat, dLon))
.radius(150)
.strokeColor(Color.RED)
// store the created circles
allCircles.add(aCircle);
}
// in the LocationListener iterate over all stored circles and check the distances against each one of them
// as you add the circles and markers in the same method you'll have a correspondence between them in the two lists
// another sensible approach would be to create a custom Area class
// to hold both the Marker and the circle in one single place
// so when you find yourself inside a circle the marker will be at the same position in allMarkers
for (int i = 0; i < allCircles.size(); i++) {
Circle c = allCircles.get(i);
Location.distanceBetween(location.getLatitude(), location.getLongitude(), c.getCenter().latitude, c.getCenter().longitude, distance);
if (distance[0] > c.getRadius()) {
Log.i("myLogs", "Outside");
} else {
String markerTitle;
markerTitle = allMarkers.get(i).getTitle();
Log.i("myLogs", "I´ in the circle" + " " + markerTitle);
// you found a circles so you may want to break out of the for loop, break;
}

GeofencingApi was created exactly for this purpose: https://developer.android.com/reference/com/google/android/gms/location/GeofencingApi.html

I think you make mistake createNewMarkerAndCircle(), Please make MarkerOptions and Circle local else when update map only last instance of show, that is reason that only last circle show.
public void createNewMarkerAndCircle() {
//...
MarkerOptions aMarker = mMap.addMarker(new MarkerOptions()
.position(new LatLng(dLat, dLon))
.title(nombre_punto)
.snippet(introduccion_punto)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));
Circle aCircle = mMap.addCircle(new CircleOptions()
.center(new LatLng(dLat, dLon))
.radius(150)
.strokeColor(Color.RED)
}

Distance between my current location and polyline Google Maps Api V2

I'm working on Android Studio>> I have an origin point and destiny point. I draw the route with the JSONData from Google Services and I create a polyline. Now, I need to monitor user's current position from the polyline in the map, but I can't.
Here's my code:
private void drawRoute(List<LatLng> list) {
if ((list != null) && (list.size() > 0)) {
polylineOptions = new PolylineOptions()
.addAll(list)
.width(8);
map.addPolyline(polylineOptions);
CircleOptions circleOptions;
for (int i = 0; i < polylineOptions.getPoints().size(); i++) {
LatLng point = polylineOptions.getPoints().get(i);
circleOptions = new CircleOptions()
.center(new LatLng(point.latitude, point.longitude))
.strokeColor(Color.TRANSPARENT)
.strokeWidth(1)
.fillColor(Color.argb(100, 164, 171, 167))
.radius(10);
map.addCircle(circleOptions);
}
} else {
Log.i("Msg", "No routes");
}
}
And I get the distance with this:
private double getDistance(LatLng originPoint, LatLng destinyPoint) {
try {
Location origin = new Location("Origin point");
origin.setLatitude(originPoint.latitude);
origin.setLongitude(originPoint.longitude);
Location destiny = new Location("Destiny point");
destiny.setLatitude(destinyPoint.latitude);
destiny.setLongitude(destinyPoint.longitude);
return origin.distanceTo(destiny);
} catch (Exception e) {
Log.e("Msg", e.getMessage());
return 0d;
}
}
I don't know if there's a way to find a "piece" of polyline in the circle around user's current location and calculate the distance between that "piece" and current location. I've been searching but the code I found is in V3 and I'm starting Android apps. I appreciate your help!

Well, if you need it, I resolve it with this code:
#Override
protected Boolean doInBackground(List<LatLng>... params) {
publishProgress();
List<LatLng> list = params[0];
LatLng currentPosition = list.get(0);
for (int i = 1; i < list.size(); i++) {
if (obtenerDistancia(currentPosition, list.get(i)) <= 100) {
return false;
}
}
return true;
}
Where list = current position + polyline.getPoints()
list[0] = current position;
list[1], list[2]..., list[n] = polyline points.
I calculate distance between my current position (list[0]) and each point in polyline (list[1], list[2]..., list[n]]. If I find at least one point that is <= 100 meters from my current position, that means user is close to the drawn route.

You don't need to find the "piece" around the user current postion.
You just need to decodePolyLine the points in the JSon file and put all the LatLng to a list and use the class I have created to check it.
Here is my answer for the relative topic it have the Class and the method you're looking for: https://stackoverflow.com/a/49904276/7548514

Android maps auto zooming

Hi Im having a little issue with displaying points on a map.
I use an Arraylist to store multiple lat/lng values and then do a for loop to add the point and auto zoom. Everything works fine when there are 2 or more markers. The problem is when only 1 marker is added it zooms in too close.
Anyone know how to resolve this?
public static void processMap()
{
for (int i = 0; i < lat.size(); i++)
{
MarkerOptions markerOptions = new MarkerOptions();
LatLng latLng = new LatLng(lat.get(i), lng.get(i));
markerOptions.position(latLng);
markerOptions.title("title");
markerOptions.snippet("description");
mMap.addMarker(markerOptions);
bounds.include(new LatLng(lat.get(i), lng.get(i)));
}
mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds.build(), 150));
}
Updated code
public static void processMap()
{
int num = 0;
double lat2 = 0;
double lng2 = 0;
for (int l = 0; l < lat.size(); l++)
{
lat2 = lat.get(l);
lng2 = lng.get(l);
LatLng latLng = new LatLng(lat2, lng2);
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(latLng);
markerOptions.title(title.get(l));
markerOptions.snippet(description.get(l));
mMap.addMarker(markerOptions);
bounds.include(new LatLng(lat2, lng2));
num++;
}
if (num == 1)
{
// if only 1 marker
LatLng latLng2 = new LatLng(lat2, lng2);
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng2, 16));
}
else
{
// more than 1 marker
mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds.build(), 150));
}
}
Hi sorry I didn't reply earlier I was attempting to fix the problem. I managed to fix it, but is this the correct way of going about it?

The edit you made should fix your problem. Anyway you don't need to set new LatLng if you only have 1 marker. Passing the bound should do. I would make this little edit:
if (num == 1)
{
// if only 1 marker
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(bounds.build(), 16));
}
else
{
// more than 1 marker
mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds.build(), 150));
}
Hope it helps. Good luck!

Your code does not really tell why you are using .newLatLngBounds(), but this will center the map on your given bounding box and respecting the given 150px padding around the box.
The zoom is then adapted according to the elements inside the bounding box to show all of them. When there is only one marker inside the box, it will zoom to it (and probably too close). The docs say that the map will be centered "at the greatest possible zoom level".
So to prevent this, I would choose a good zoom level for the first marker, add it, move the camera with moveCamera(...) and after that continue with your code when there are other markers left.