180911(화) - Google Maps (Markers)

Google Maps

Markers

- can customize markers by color, replacing marker icon with custom image

- Info windows : additional context to a marker

Introduction

- API를 통해서 icon's color, image or anchor point 를 변경 가능

- Marker

- draggable을 true하고 longclick하면 marker를 옮길 수 있다.

- 물론 toolbar도 뜸

Add a marker

@Override
public void onMapReady(GoogleMap map) {
    map.addMarker(new MarkerOptions()
        .position(new LatLng(10, 10))
        .title("Hello world"));
}

/**
 * A demo class that stores and retrieves data objects with each marker.
 */
public class MarkerDemoActivity extends FragmentActivity implements
        OnMarkerClickListener,
        OnMapReadyCallback {

    private static final LatLng PERTH = new LatLng(-31.952854, 115.857342);
    private static final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);
    private static final LatLng BRISBANE = new LatLng(-27.47093, 153.0235);


    private Marker mPerth;
    private Marker mSydney;
    private Marker mBrisbane;

    private GoogleMap mMap;

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

        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /** Called when the map is ready. */
    @Override
    public void onMapReady(GoogleMap map) {
        mMap = map;

        // Add some markers to the map, and add a data object to each marker.
        mPerth = mMap.addMarker(new MarkerOptions()
                .position(PERTH)
                .title("Perth");
        mPerth.setTag(0);

        mSydney = mMap.addMarker(new MarkerOptions()
                .position(SYDNEY)
                .title("Sydney");
        mSydney.setTag(0);

        mBrisbane = mMap.addMarker(new MarkerOptions()
                .position(BRISBANE)
                .title("Brisbane");
        mBrisbane.setTag(0);

        // Set a listener for marker click.
        mMap.setOnMarkerClickListener(this);
    }

    /** Called when the user clicks a marker. */
    @Override
    public boolean onMarkerClick(final Marker marker) {

        // Retrieve the data from the marker.
        Integer clickCount = (Integer) marker.getTag();

        // Check if a click count was set, then display the click count.
        if (clickCount != null) {
            clickCount = clickCount + 1;
            marker.setTag(clickCount);
            Toast.makeText(this,
                           marker.getTitle() +
                           " has been clicked " + clickCount + " times.",
                           Toast.LENGTH_SHORT).show();
        }

        // Return false to indicate that we have not consumed the event and that we wish
        // for the default behavior to occur (which is for the camera to move such that the
        // marker is centered and for the marker's info window to open, if it has one).
        return false;
    }
}




Make a marker draggable

- draggable property를  true로 하면 marker 드래그 가능 (marker long press)

MarkerOptions.draggable(boolean)

Marker.setDraggable(boolean)

- not draggable 이 default

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .draggable(true));

Customize a marker

- Position (Required)

LatLng

- Anchor

・ marker LatLng postion에 놓여질 image의 point

・ defaults value는 middle of the bottom of image

- Alpha

・ defaults to 1.0

- Title

・ info window의 string

- Snippet

・ title 아래 보여지는 text

- Icon

・ default marker image

- Draggable

・ true면 can move the marker

- Visible

・ default to true

- Flat or Billboard orientation

・ marker는 기본적으로 not rotate or tilt with the camera

・ Flat markers는 oriented가 surface of the earth이고, rotate and tilt with the camera

・ 물론 두가지 다 zoom에는 영향 받지 않음 (원하면 GroundOverlays를 사용)

- Rotate

・ clockwise degrees

・ flat marker는 영향을 받는다.

・ flat marker default position은 north aligned

・ 기본 marker는 pointing up and facing the camera

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE));

Customize the marker color

- BitmapDescriptor

- BitmapDescriptorFactory

- BitmapDescriptorFactory.defaultMarker(float hue)

- hue value 0 ~360, representing point on a color wheel

static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
Marker melbourne = mMap.addMarker(new MarkerOptions()
                          .position(MELBOURNE)
                          .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));

Customize the marker image

- BitmapDescriptor

- BitmapDescriptorFactory 

- fromAsset(String assetName)

・ bitmap image in the assets directory

- fromBitmap(Bitmap image)

・ bitmap image

- fromFile(String fileName)

・ image file located in the internal storage

- fromPath(String absolutePath)

・ absolute file path of a bitmap image

- fromResource(int resourceId)

・ using resource ID

 private static final LatLng MELBOURNE = new LatLng(-37.813, 144.962);
  private Marker melbourne = mMap.addMarker(new MarkerOptions()
                            .position(MELBOURNE)
                            .title("Melbourne")
                            .snippet("Population: 4,137,400")
                            .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));

Flatten a marker

- normally marker는 rotating, tilting or zooming change 에 영향받지 않는다.

- can orientation marker to be flat against the earth

- 이런 flat marker는 위에 말한 changes에 영향을 받게 됌

- but, zoom in or out에는 size retain

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .flat(true));

Rotate a marker

- Marker.setRotation()

- measured in degrees clockwise from the default position

- flat marker는 default position은 north

- normal marker는 pointing up and facing the camera

static final LatLng PERTH = new LatLng(-31.90, 115.86);
Marker perth = mMap.addMarker(new MarkerOptions()
                          .position(PERTH)
                          .anchor(0.5,0.5)
                          .rotation(90.0));

Marker z-index

- z-index는 marker의 stack order를 specifies한다.

- high z-index의 marker가 lower z-indexes보다 위에 drawn

- default value is 0

- MarkerOptions.zIndex()

@Override
public void onMapReady(GoogleMap map) {
    map.addMarker(new MarkerOptions()
        .position(new LatLng(10, 10))
        .title("Marker z1")
        .zIndex(1.0f));
}

- marker는 tile layers and non-marker overlays (ground, polylines, polygons and other shapes)보다 z-index에 관계없이 always above

- marker는 other overlays z-index group과 별도 분리된 z-index group으로 취급

Handle marker events

- event listener를 markers belong GoogleMap에 must set해줘야 함

- 당연한 얘기지만 marker obejct를 비교할때에는, == operator가 아니라 equals()를 사용해야 한다.

・ Marker click events

- OnMarkerClickListener

- GoogleMap.setOnMarkerClickListener(OnMarkerClickListener)

- onMarkerClick(Marker)

- default behavior는 show info window and move the camera that marker is centered on the map

- Effect z-index click event

・ cluster를 click하면 highest z-index가 click event triggered

・ subsequent click이 next turn of cycle의 marker click event

・ Marker drag

- OnMarkerDragListener

- GoogleMap.setOnMarkerDragListener

- onMarkerDragStart(Marker)

- onMarkerDrag(Marker) (constantly!)

- onMarkerDragEnd(Marker)

・ Info window click