Add an image for Android marker info window

Question

I'm making an android app. In this app, there are markers of some hotels and when user click on the marker info window appears and it should be like following image. (This is a web application)

I have a list view in my navigation drawer fragment and map fragment has the markers.

This is my code before I try to load image for the info window in MainActivity.java.

  // Load Hotels
    private class GetHotelTask extends AsyncTask<String, String, String> {
        @Override
        protected String doInBackground(String... data) {
            String identifier = data[0];

            // Toast.makeText(getContext(), "Manuli "+identifier, Toast.LENGTH_LONG ).show();
            // Create a new HttpClient and Post Header
            HttpClient httpclient = new DefaultHttpClient();
            HttpPost httppost = new HttpPost("http://api.ayubo.lk/android/retrievehotels");
            HttpResponse response = null;
            String responseStr = null;

            try {
                //add data
                List<NameValuePair> nameValuePairs = new ArrayList<NameValuePair>(1);
                nameValuePairs.add(new BasicNameValuePair("long", data[0]));
                nameValuePairs.add(new BasicNameValuePair("lat", data[1]));
                httppost.setEntity(new UrlEncodedFormEntity(nameValuePairs));
                //execute http post
                response = httpclient.execute(httppost);
                responseStr = EntityUtils.toString(response.getEntity());

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

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

            return responseStr;
        }

        protected void onPostExecute(String result) {

            try {
                JSONArray jObj = new JSONArray(result);

                for(int a=0;a<jObj.length();a++){

                JSONArray obj= (JSONArray) jObj.get(a);

                    Log.i("json", obj.get(3).toString());
                    Marker marker = GoogleMapsFragment.map.addMarker(new MarkerOptions()
                            .position(new LatLng( Double.valueOf(obj.get(3).toString()),  Double.valueOf(obj.get(2).toString())))
                            .title(obj.get(1).toString()+" | simple Price : "+obj.get(4).toString())
                            .snippet(obj.get(5).toString())
                            .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_marker_hotel)));


                    hotelMarkers.add(marker);

                }

                LatLng latLng = new LatLng(Double.valueOf(latitude),Double.valueOf(longtitude));

                GoogleMapsFragment.map.moveCamera(CameraUpdateFactory.newLatLng(latLng));

                GoogleMapsFragment.map.animateCamera(CameraUpdateFactory.zoomTo(15));

            } catch (JSONException e) {
                Log.e("JSON Parser", "Error parsing data " + e.toString());
            }

        }

    }

Here is the listview call of hotels inside MainActivity.java.

// Hotels
            case 0:
                if (A == 0){
                    Bundle bundle = new Bundle();
                    bundle.putString("restaurants", "Default");
                    fragmentObj = new GoogleMapsFragment();
                    fragmentObj.setArguments(bundle);

                    if (!sclItems.contains(0)){
                        new GetHotelTask().execute(longtitude, latitude);
                        sclItems.add(0);
                    }else {
                        removeHotels();
                        sclItems.remove((Integer)0);
                    }
                    A = 1;
                }else {
                    if (!sclItems.contains(0)){
                        new GetHotelTask().execute(longtitude, latitude);
                        sclItems.add(0);
                    }else {
                        removeHotels();
                        sclItems.remove((Integer)0);
                    }
                }
                break;

I've tried adding info_window_layout.xml and here is the code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:adjustViewBounds="true"
            android:src="@drawable/ic_prof"/>
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10dp"/>
    </LinearLayout>

</LinearLayout>

But, I cannot load my info window like in the image. I've tried several solutions including this and any of that didn't give me a solution.

Can someone please help me with this?

Thanks in advance. :)

• Error -

Answer 1

Figured it out finally. :D

Changed the info_window_layout.xml like this.

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#000000" >
    <LinearLayout
        android:id="@+id/text_box"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/markerImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/distance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</ScrollView>

Then added a new class called, ManiInfoAdapter.java

class MapInfoWindowAdapter implements GoogleMap.InfoWindowAdapter {

    private LayoutInflater inflater;
    private Context context;

    public MapInfoWindowAdapter(Context context){
        inflater = (LayoutInflater) context.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
        this.context = context;
    }

    @Override
    public View getInfoWindow(Marker marker) {
        // Getting view from the layout file
        View v = inflater.inflate(R.layout.info_window_layout, null);

        TextView title = (TextView) v.findViewById(R.id.title);
        title.setText(marker.getTitle());

        TextView address = (TextView) v.findViewById(R.id.distance);
        address.setText(marker.getSnippet());

        ImageView iv = (ImageView) v.findViewById(R.id.markerImage);
        iv.setImageResource(R.drawable.ic_attraction1);

        return v;
    }

    @Override
    public View getInfoContents(Marker marker) {
        return null;
    }
}

Now working as expected. :)

Answer 2

Try using info window adapter. This may help you i think.

mMap.setInfoWindowAdapter(setMarkerWindow());




    private GoogleMap.InfoWindowAdapter setMarkerWindow() {
                return new GoogleMap.InfoWindowAdapter() {
                    @Override
                    public View getInfoWindow(Marker marker) {
                        View myContentView = getLayoutInflater().inflate(
                                R.layout.map_info_window, null);
                        myContentView.setBackgroundColor(Color.TRANSPARENT);
                        TextView tvTitle = ((TextView) myContentView
                                .findViewById(R.id.title));
 tvTitle.setText(marker.getTitle());
                       ......
                        return myContentView;
                    }

                    @Override
                    public View getInfoContents(Marker marker) {
                        return null;
                    }
                };
            }

Answer 3

I have tried to do the same for my app. I couldn't load images into the marker as I wanted.

So what I did was.

1. Created an xml layout maps_info_window_blue

2. I included into my map layout.

   <fragment
       android:id="@+id/map_booking_frg"
       android:name="com.google.android.gms.maps.SupportMapFragment"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   
   
   <ImageView
       android:id="@+id/center_marker"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_above="@id/shadowView"
       android:layout_centerHorizontal="true"
       android:src="@drawable/marker_start" />
   
   <include layout="@layout/maps_info_window_blue"
       android:id="@+id/rl_info_window_blue"
       android:layout_width="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_above="@+id/shadowView"
       android:layout_height="wrap_content"/>
   
   <View
       android:id="@+id/shadowView"
       android:layout_width="wrap_content"
       android:layout_height="1dp"
       android:background="@color/transparent"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:visibility="invisible" />
   

For me the requirement was to have the marker info window in the center. You can set it where ever you want.

3. In order to give the illusion of a marker, I always set LatLng which I want to be the center of the map (CameraPosition target is set to the LatLng I want)

Answer 4

Try this code :

   Marker kiel=FragmentLeft.map.addMarker(new MarkerOptions().position(new LatLng(Double.parseDouble(p.getLatitude()), Double.parseDouble(p.getLongitude())))
                .title(p.getEventName()).snippet(getLocationStringAddress(new LatLng(Double.parseDouble(p.getLatitude()), Double.parseDouble(p.getLongitude()))))
                .icon(BitmapDescriptorFactory.fromResource(R.mipmap.map_set_marker)));
        markers.put(kiel.getId(),"http://"+strPhoto);
        kiel.setInfoWindowAnchor(1.95f,0.0f);
        hMarker.put(kiel,p);
        map.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
            @Override
            public View getInfoWindow(Marker arg0) {
                View myContentView = flipscreen.this.getLayoutInflater().inflate(R.layout.custommarker, null);
                TextView tvTitle = ((TextView) myContentView.findViewById(R.id.title));
                tvTitle.setText(arg0.getTitle());
                TextView tvSnippet = ((TextView) myContentView.findViewById(R.id.snippet));
                tvSnippet.setText(arg0.getSnippet());
                ImageView imgMarkerImage=(ImageView)myContentView.findViewById(R.id.imgMarkerImage);
                System.out.println("List of Event Photos = " + strPhoto);
                Picasso.with(flipscreen.this).load(markers.get(arg0.getId())).into(imgMarkerImage);
                return myContentView;
            }
            @Override
            public View getInfoContents(Marker marker) {
                return null;
            }
        });
        map.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() {
            @Override
            public void onInfoWindowClick(Marker marker) {
                Iterator myVeryOwnIterator = hMarker.keySet().iterator();
                while(myVeryOwnIterator.hasNext()) {
                    Marker key=(Marker)myVeryOwnIterator.next();
                    if(marker.getId().equals(key.getId())){
                        Event value=(Event)hMarker.get(key);
                        Activity_Event_Details.setEventDetails(value);
                        startActivity(new Intent(flipscreen.this,Activity_Event_Details.class));

                    }
                }
            }
        });