CODEWITHSUNDEEP
androidhtmlgoogle-mapsinfowindow
dunce1
dunce1

Reputation: 323

Android Google Maps HTML in Marker InfoWindow

I am currently working on parsing a JSON object containing coordinates and html code and displaying them on Google Maps for Android...So far I have this method:

private void createMarkersFromJson(String json) throws JSONException {
// De-serialize the JSON string into an array of objects
    JSONArray jsonArray = new JSONArray(json);
    for (int i = 0; i < jsonArray.length(); i++) {
// Create a marker for each object in the JSON data.
        JSONObject jsonObj = jsonArray.getJSONObject(i);
        mMap.addMarker(new MarkerOptions()
                        .position(new LatLng(
                                jsonObj.getDouble("lat"),
                                jsonObj.getDouble("long")
                        ))
        );
    }
}

Reference for above code: https://gist.github.com/TimPim/5902100

This method displays the markers successfully. Let's say in part of my JSON object I have a record called "contentString", which contains html code. I was wondering, how I would be able to display this properly in an info window like Google shows here for its Javascript API:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

I have looked at this answer and have tried implementing it myself but no success: Android Google Maps V2 Title or Snippets Strings From HTML

If someone can show me a more detailed solution and how it can be applied in this domain, it would be much appreciated.

Upvotes: 3

Views: 1494

Answers (2)

dunce1
dunce1

Reputation: 323

Figured it out. Edited the setUpMapIfNeeded method to look like this: 

private void setUpMapIfNeeded() {
    // Do a null check to confirm that we have not already instantiated the map.
    if (mMap == null) {
        // Try to obtain the map from the SupportMapFragment.
        mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map))
                .getMap();
        // Check if we were successful in obtaining the map.
        if (mMap != null) {
            mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {
                @Override
                public View getInfoWindow(Marker marker) {
                    return null;
                }

                @Override
                public View getInfoContents(Marker marker) {
                    View v = getLayoutInflater().inflate(R.layout.infowindow_layout, null);
                    TextView textView = (TextView) v.findViewById(R.id.marker_label);
                    Spanned spannedContent = Html.fromHtml(marker.getTitle());
                    textView.setText(spannedContent, TextView.BufferType.SPANNABLE);
                    return v;
                }
            });
            setUpMap();
        }
    }
}

Where marker.getTitle(), gets the title from the marker in the other method (which contains our html content) and sets the text in our newly created InfoWindow. This tutorial was very helpful: https://www.youtube.com/watch?v=g7rvqxn8SLg

I also created an infowindow_layout.xml under res/layout which looks like this:

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

<LinearLayout
    android:id="@+id/station_info_layout"
    android:layout_width="205dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

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

    <TextView
        android:id="@+id/marker_label"
        android:layout_marginLeft="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>


</LinearLayout>

If anyone would like me to clarify my answer, please let me know and I will edit this post.

Upvotes: 3

bjiang
bjiang

Reputation: 6078

As I can see, you can use Custom info windows for Android to reach the goal.

To do this, you must create a concrete implementation of the InfoWindowAdapter interface and then call GoogleMap.setInfoWindowAdapter() with your implementation. The interface contains two methods for you to implement: getInfoWindow(Marker) and getInfoContents(Marker). The API will first call getInfoWindow(Marker) and if null is returned, it will then call getInfoContents(Marker). If this also returns null, then the default info window will be used.

For more details, please refer here.

Upvotes: 0

Related Questions