androidgoogle-mapsgoogle-maps-markersgoogle-maps-stylingpoint-of-interest

Android Google Map API cumstom marker bring Google map data on custom marker


I'm trying to build an Android application that needs to show some places on the map with custom markers. When the marker clicked it shows the snippet, however, for my application I need to show the Google maps info about the place as in Google Maps application shows. My XML is simple:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="com.google.android.gms.maps.SupportMapFragment" />
</RelativeLayout>

I've two problems:

  1. The Points of Interest from Google Maps are not clickable. Their icon visible on the map but they are not clickable.

  2. When my custom marker clicked I want to show the Google map's info, not my snippet.

Are there ways to achieve these?


Solution

  • For p.1:

    At first hide all "default" Points of Interest from Google Maps like in this answer of Jozef:

    You can do it simply by modification of the map style: Adding a Styled Map

    1. Create JSON file src\main\res\raw\map_style.json like this:

    [
      {
        featureType: "poi",
        elementType: "labels",
        stylers: [
          {
            visibility: "off"
          }
        ]
      }
    ]
    
    1. Add map style to your GoogleMap

    googleMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(getContext(), R.raw.map_style));
    

    Than use Place Search from Google Places API and get list of points of interest via nearby URL request:

    https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=<LAT_LNG_e_g_ 32.944552,-97.129767>&types=point_of_interest&radius=<RADIUS_IN_METERS>&sensor=false&key=<YOUR_APP_KEY>
    

    parse it and show desired places on map programmatically as yours clickable markers.

    NB! Nearby URL request returns only 20 places, for load more data you should use string value from next_page_token tag of response and pass it via pagetoken parameter for next request:

     https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=<LAT_LNG_e_g_ 32.944552,-97.129767>&types=point_of_interest&radius=<RADIUS_IN_METERS>&sensor=false&key=<YOUR_APP_KEY>&pagetoken=<TOKEN_FOR_NEXT_PAGE_FROM_next_page_token_TAG_OF_RESPONSE>
    

    And don't forget to enable Places API for your application from Console.

    For p.2:

    Use info from p.1 (Place Search) and suggested by Vadim Eksler in his comment Place Details in Google Maps Android Custom Info Window like in this example:

    public class CustomInfoWindowGoogleMap implements GoogleMap.InfoWindowAdapter {
    
        private Context context;
    
        public CustomInfoWindowGoogleMap(Context ctx){
            context = ctx;
        }
    
        @Override
        public View getInfoWindow(Marker marker) {
            return null;
        }
    
        @Override
        public View getInfoContents(Marker marker) {
            View view = ((Activity)context).getLayoutInflater()
    .inflate(R.layout.map_custom_infowindow, null);
    
            TextView name_tv = view.findViewById(R.id.name);
            TextView details_tv = view.findViewById(R.id.details);
            ImageView img = view.findViewById(R.id.pic);
    
            TextView hotel_tv = view.findViewById(R.id.hotels);
            TextView food_tv = view.findViewById(R.id.food);
            TextView transport_tv = view.findViewById(R.id.transport);
    
            name_tv.setText(marker.getTitle());
            details_tv.setText(marker.getSnippet());
    
            InfoWindowData infoWindowData = (InfoWindowData) marker.getTag();
    
            int imageId = context.getResources().getIdentifier(infoWindowData.getImage().toLowerCase(),
                    "drawable", context.getPackageName());
            img.setImageResource(imageId);
    
            hotel_tv.setText(infoWindowData.getHotel());
            food_tv.setText(infoWindowData.getFood());
            transport_tv.setText(infoWindowData.getTransport());
    
            return view;
        }
    }