Lesson 140. Google Maps. Your objects on the map

Lesson 140. Google Maps. Your objects on the map


In this lesson:

– we place our objects on the map

We can place tooltips on the map, draw simple shapes, and overlay our textures. Let’s write a program and consider all this in the examples.

See Lesson 139 for detailed instructions on how to create and configure a Google Maps project.

Let’s create a project:

Project name: P1401_GoogleMapsDraw
Build Target: Android 2.3.3
Application name: GoogleMapsDraw
Package name: ru.startandroid.develop.p1401googlemapsdraw
Create Activity: MainActivity

IN strings.xml add rows:

Test

screen main.xml:



    
        
    
    
    

Button and snippet

MainActivity.java:

package ru.startandroid.develop.p1401googlemapsdraw;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.Marker;

public class MainActivity extends FragmentActivity {
  
  SupportMapFragment mapFragment;
  GoogleMap map;
  Marker marker;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        map = mapFragment.getMap();
        if (map == null) {
          finish();
          return;
        }
        
        init();  

    }
    
    private void init() {
      
    }
    
    public void onClickTest(View view) {
      
    }
}

IN onCreate we find our map snippet and get a GoogleMap object from it using the getMap method. Note that this method can return null.

method init while empty.

method onClickTest while empty.

markers

Let’s start with the markers. I think everyone knows what it is like to use map search. Let’s try to programmatically place a marker. rewrite onClickTest:

  public void onClickTest(View view) {
    map.addMarker(new MarkerOptions()
      .position(new LatLng(0, 0))
      .title("Hello world"));
  }

To add, we use the addMarker method and pass the MarkerOptions object to it. Specify the coordinates of the marker (position) and text (title), which will be displayed after clicking on the marker.

We save everything, launch the application and click Test.

a marker appeared at the point (0, 0).

Let’s click on it

the text we typed appeared.

Let’s look at what MarkerOptions gives us.

alpha – marker transparency, value from 0 to 1

anchor is the marker point corresponding to the map point.

Let’s look at the marker closer

Now the bottom of the narrowed part of the map indicates the desired place on the map. If you take the width and height of the marker unit, this marker point can be designated as (0.5, 1).

Therefore, we can use our icons as a marker, it is not necessary that their index part will also be located at the bottom center. Therefore, anchor enables us to specify the marker point.

For example, specifying (0.5, 0) we will get a marker that will point to its upper center.

draggable – the marker can be dragged after installation

flat – setting the behavior of the marker when rotating and tilting the map. If true, the marker will be anchored to the map, ie it will rotate and tilt with the map. If false (by default), the marker will be anchored to the camera: it will remain in the same position when turning and tilting the map.

icon – the ability to customize the marker icon, requires a BitmapDescriptor object to enter, which in turn can be obtained using the BitmapDescriptorFactory object.

rewrite the method onClickTest:

  public void onClickTest(View view) {
    map.addMarker(new MarkerOptions().position(new LatLng(-10, -10)).icon(
        BitmapDescriptorFactory
            .defaultMarker(BitmapDescriptorFactory.HUE_GREEN)));

    map.addMarker(new MarkerOptions().position(new LatLng(0, 0)).icon(
        BitmapDescriptorFactory.defaultMarker()));

    map.addMarker(new MarkerOptions().position(new LatLng(10, 10)).icon(
        BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher)));
  }

At point (-10, -10) we put the default marker, which can be obtained by the defaultMarker method, but in doing so we change its color to green.

At (0, 0) we put the default token, which can be obtained by the defaultMarker method. We do not change the color.

At the point (10, 10) put the marker in the form of standard Android icon, using the fromResource method and specifying the required drawable-resource.

We launch, we press Test and see the markers:

BitmapDescriptorFactory also has other methods for obtaining a marker icon:

– fromAsset, from the assets folder

– fromBitmap, from Bitmap object

– fromFile, from an internal repository file

– fromPath, from a file with the specified path

Well, for the defaultMarker method there are some more ready colors besides green, in the help they are all specified.

rotation – the rotation of the marker (in degrees) clockwise relative to the anchor point.

snippet – additional text for the info window (which is displayed after clicking on the marker)

visible – the visibility of the marker

The addMarker method will return a Marker object when you add it, for which you will later be able to apply the above settings using the set * methods.

The map gives us a couple of listeners to track the events of the markers.

OnMarkerClickListener (set by the setOnMarkerClickListener method) has the onMarkerClick method, which gives us the Marker that was clicked.

OnMarkerDragListener (set by the setOnMarkerDragListener method) has three methods for tracking marker dragging: onMarkerDragStart (dragging started), onMarkerDrag (dragging in progress) and onMarkerDragEnd (dragging completed).

Info window

Clicking on the marker displays a text window. You can also show this window programmatically using the showInfoWindow method of the Marker object.

rewrite the methods init and onClickTest:

  private void init() {
    marker = map.addMarker(new MarkerOptions()
        .position(new LatLng(0, 0))
        .title("Hello world")
        .snippet("Additional text"));
  }

  public void onClickTest(View view) {
    marker.showInfoWindow();
  }

Let’s launch the application, a marker will appear. press Test and a text box appears.

The hideInfoWindow method hides the info window. The isInfoWindowShown method will tell you if an info window is currently displayed for the token.

The info window can be customized. rewrite the method init:

  private void init() {

    marker = map.addMarker(new MarkerOptions().position(new LatLng(0, 0))
        .title("Hello world").snippet("Additional text"));

    map.addMarker(new MarkerOptions().position(new LatLng(0, 20))
        .title("Hello world1").snippet("Additional text1"));

    map.setInfoWindowAdapter(new InfoWindowAdapter() {

      @Override
      public View getInfoWindow(Marker marker) {
        if (marker.getId().equals(MainActivity.this.marker.getId())) {
          TextView tv = new TextView(MainActivity.this);
          tv.setText("Test getInfoWindow");
          tv.setTextColor(Color.RED);
          return tv;
        } else
          return null;
      }

      @Override
      public View getInfoContents(Marker marker) {
        TextView tv = new TextView(MainActivity.this);
        tv.setText("Test getInfoContents");
        return tv;
      }
    });

  }

We add two markers and store the first one in the variable marker. Next, we call the setInfoWindowAdapter method, into which we create and pass an InfoWindowAdapter object. This object has two methods:

– getInfoWindow, replacing the entire info window with your View (which is the result of the method)

– getInfoContents, replacing the content of the info window with its View (which is the result of the method)

The algorithm is this. When you call the info window, the system calls getInfoWindow and uses its View. If getInfoWindow returned null then getInfoContents is called and its View is used. If null is here too, then a standard info window is created.

In the getInfoWindow by id method, we check that this is the first marker we have created and we create our own View (TextView with red text) Test getInfoWindow). For all other tokens, the method returns null (so they will go to the getInfoContents method).

In the getInfoContents method, we create our View (TextView with text Test getInfoContents) And use it for all tokens.

We launch the program, we have two markers. Let’s click on the first one:

We see that the info window has completely changed similar to our View from getInfoWindow.

Click on another marker.

Not all the info window has been replaced here, only its contents. And the frame remained.

With the setOnInfoWindowClickListener method, we can hang the OnInfoWindowClickListener listener, which by the onInfoWindowClick method will let us know what happened by clicking on the info window and give us a Marker.

figures

The map gives us the opportunity to draw the simplest figures on it: circles, lines, polygons.

There are three objects for this:

– Polyline – a set of points that will be connected by lines

– Polygon – Set of points that will be connected by lines, incl. and from last point to first

– Circle – circle, allows you to specify the center point and the radius

These objects allow for graphical settings such as line thickness and color, fill color.

Let’s draw three figures. rewrite the method init:

  private void init() {
    PolylineOptions polylineOptions = new PolylineOptions()
        .add(new LatLng(-5, -30)).add(new LatLng(-5, -20))
        .add(new LatLng(5, -20)).add(new LatLng(5, -30))
        .color(Color.MAGENTA).width(1);

    map.addPolyline(polylineOptions);

    PolygonOptions polygoneOptions = new PolygonOptions()
        .add(new LatLng(-5, -10)).add(new LatLng(-5, 0))
        .add(new LatLng(5, 0)).add(new LatLng(5, -10))
        .strokeColor(Color.CYAN).strokeWidth(10).fillColor(Color.GREEN);

    map.addPolygon(polygoneOptions);

    CircleOptions circleOptions = new CircleOptions()
        .center(new LatLng(0, 15)).radius(500000)
        .fillColor(Color.YELLOW).strokeColor(Color.DKGRAY)
        .strokeWidth(5);

    map.addCircle(circleOptions);
  }

The first figure is Polyline. The PolylineOptions object is used for customization. Specify the dots, color, and width of the lines. There is no fill color adjustment here, as the figure may not be open. Add a shape to the map using the addPolyline method.

Next up is Polygon. The PolygonOptions object is used for customization. Specify points, color (strokeColor) and line thickness (strokeWidth), and fill color (fillColor). We add by addPolygon method.

And Circle. Configurable with the CircleOptions object. Specify the center point, radius (in meters), color (strokeColor) and line thickness (strokeWidth), and fill color (fillColor). We add by addCircle method.

Run the program and see the result.

As you can see, the second figure is closed, although I indicated only 4 points. The line from last to first is drawn automatically.

Shapes also have settings:

visible – visibility

zIndex – which determines which of the two figures will be drawn above (floor, closer to us) as they intersect. The higher the value, the higher the figure.

geodesic (for Polyline and Polygon) – if true, then the lines will not be straight but correspond to the surface of the earth, ie slightly rounded. This will be noticeable over long distances.

For PolygonOptions there is an addHole method, it draws Polygon inside Polygon, forming a hole

rewrite init:

  private void init() {
    List list = new ArrayList();
    list.add(new LatLng(-4, -5));
    list.add(new LatLng(0, -1));
    list.add(new LatLng(4, -5));
    list.add(new LatLng(0, -9));
    
    PolygonOptions polygoneOptions = new PolygonOptions()
        .add(new LatLng(-5, -10))
        .add(new LatLng(-5, 0))
        .add(new LatLng(5, 0)) 
        .add(new LatLng(5, -10))
        .addHole(list)
        .strokeColor(Color.CYAN).
        strokeWidth(1).
        fillColor(Color.GREEN); 

    map.addPolygon(polygoneOptions);    
  }

The result will be this

The methods of adding shapes to the map return these objects to you, and you can further change their settings (set *) or delete them with the remove method.

Overlay

When we put a marker, it does not resize when zoomed. And it is possible to overlay an image on the map, which will be the same as the map will resize as you zoom in and out.

rewrite the method init:

  private void init() {
    GroundOverlayOptions newarkMap = new GroundOverlayOptions()
        .image(BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher))
        .position(new LatLng(0, 0), 500000f, 500000f);
    map.addGroundOverlay(newarkMap);
  }

We create and configure the GroundOverlayOptions object, specifying the image we want and its position, which consists of the center point and the size (width and height) of the image in meters.

Add an object to the map using the addGroundOverlay method.

Run and see the result.

Let’s zoom in and return.

You can see that the picture is tied to the card.

You can also specify locations by:

position (LatLng location, float width) – similar to what we called, but you can only specify the width, and the height itself will be determined by the size of the picture

positionFromBounds (LatLngBounds bounds) – through the LatLngBounds object we point to the southwest and northeast point on the map and the image will be located in the specified area

This object also supports the following settings:

transparency – the level of transparency

visible – visibility

zIndex – Z-level who is taller when drawing

The addGroundOverlay method returns a GroundOverlay object, which you can then change or remove.

In the next lesson:

– access to Canvas




Discuss in the forum [40 replies]

Leave a Comment