[android] 구글맵(Google Map) 레이아웃으로 구성된 커스텀 마커(이미지 + 텍스트) 생성하기

구글맵에서 제공하는 마커 기능을 사용해 레이아웃으로 구성된 상점 아이콘 이미지 + 상점명 텍스트를 오버레이 해본다.

일단 map_text_marker.xml 라는 띄우고 싶은 마커모양을 디자인 한 xml파일을 만든다.

이런 모양의 마커를 출력하고 싶다. (ImageView + TextView)

- map_text_marker.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal" android:layout_width="wrap_content"

    android:layout_height="wrap_content">



    <ImageView

        android:layout_width="30dp"

        android:layout_height="30dp"

        android:id="@+id/iViewCategory"

        android:src="@drawable/ic_test" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:text="Store Name"

        android:id="@+id/tViewName"

        android:textColor="#000000"

        android:textSize="13dp"

        android:gravity="center_vertical" />

</LinearLayout>

위 xml을 불러와서 구현하기 위해 LayoutInflater 로  View를 생성하고, ImageView와 TextView를 view.findViewById(R.id.textView) 로 가져와서 원하는데로 수정해준다. 그 후 Google Map 객체의 addMarker 메서드를 이용해서 마커를 추가해주면 된다. 구현한 코드는 아래와 같다.

* facility.getName()은 상점 명이 들어있고, facility.getLatLng()는 위도 경도 LatLng가 들어있다.
* activity 는 Activity 객체

View marker = ((LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.map_text_marker, null);

TextView tViewName = (TextView) marker.findViewById(R.id.tViewName);

tViewName.setText(facility.getName());



Marker m = googleMap.addMarker(new MarkerOptions().visible(false).position(facility.getLatLng()).icon(BitmapDescriptorFactory.fromBitmap(createDrawableFromView(activity, marker))));

결과는 아래와 같이 표현된다.

위 스크린샷에서 위치 표시 ImageView의 아래 꼭지점 부분을 해당 좌표로 위치하게 하고 싶은데 마커의 기본적인 위치는 Marker의 Center Bottom으로 되어 있어서 위와 같이 제대로 된 위치에 찍히지 않게 되었다.

이를 해결하기 위해서 Anchor 기능을 이용할 예정이다.