Google Maps: How to Create a Custom Infowindow

Android Google Maps Custom InfoWindow

GoogleMap.InfoWindowAdapter will display the custom window that attach with marker if you want to display marker details at bottom of screen hide the custom window and and display the custom view on the MapView

main.xml

 <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.iphonealsham.speedli.activitys.MapsActivity" />

        <LinearLayout
            android:id="@+id/linearLayoutCustomView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textViewTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/textViewOtherDetails"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </FrameLayout>

hide the InfoWidow by return true in onMarkerClick and display customView

 @Override
    public void onMapReady(GoogleMap googleMap) {
            mGoogleMap = googleMap;
            mGoogleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
                @Override
                public boolean onMarkerClick(Marker marker) {
                    Log.d("GoogleMap", " click");
//focus the market
mGoogleMap.animateCamera(CameraUpdateFactory.newLatLng(marker.g‌etPosition()));
                    if (linearLayoutCustomView.getVisibility() == View.VISIBLE)
                        linearLayoutCustomView.setVisibility(View.GONE);
                    else
                        displayCustomeInfoWindow(marker);
                    return true;
                }
            });
    }

Set details in view

 private void displayCustomeInfoWindow(Marker marker) {
        linearLayoutCustomView.setVisibility(View.VISIBLE);
        TextView textViewTitle = linearLayoutCustomView.findViewById(R.id.textViewTitle);
        TextView textViewOtherDetails = linearLayoutCustomView.findViewById(R.id.textViewOtherDetails);
        textViewTitle.setText(marker.getTitle());
        textViewOtherDetails.setText("LatLong :: " + marker.getPosition().latitude + "," + marker.getPosition().longitude);

    }

Google map custom marker and custom Info window

You can use something like that.

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: 'your_custom_icon_URL',
        < -your icon url here
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            var popupString = '<div><b>' + locations[i][0] + '</b></div>'; < -your custom HTML codes with the design here.

            infowindow.setContent(popupString);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

I hope that can help you.

Thanks

Create a custom info window in google maps V2

its just an xml layout like other layouts would be. check here for a small tutorial.

Just remember that buttons in the layout will not work

Adding Custom Info Window to Google Maps

you have to use GMSMapViewDelegate to use markerInfoWindow to your class.

let mapview = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

mapview.delegate = self

func mapView(_ mapView: GMSMapView, markerInfoWindow marker: GMSMarker) -> UIView? {
    // Get a reference for the custom overlay
    let index:Int! = Int(marker.accessibilityLabel!)
    let customInfoWindow = Bundle.main.loadNibNamed("CustomInfoWindow", owner: self, options: nil)?[0] as! CustomInfoWindow
    customInfoWindow.Timings.text = States[index].time
    customInfoWindow.Title.text = States[index].name
    customInfoWindow.Direction_Button.tag = index
    customInfoWindow.Direction_Button.addTarget(self, action: #selector(GetDirectionsAction(sender:)), for: .touchUpInside)

    return customInfoWindow
}

Creating custom infowindow in google map

Styling the infowindow is not possible. When using infowindow the only thing you can style is the content that you put inside by giving styles in the tags inside.
You must use infobox instead of infowindow. That is a component that you can style by giving values to the available attributes. Following code is an example

var marker = new google.maps.Marker({
         map: theMap,
         draggable: true,
         position: new google.maps.LatLng(49.47216, -123.76307),
         visible: true
        });

        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "280px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
        ib.open(theMap, marker);

Check here for more

Custom Info Window for Google Maps

For those who's trying to add buttons to a custom view representing info window - it seems to be impossible to do, because Google Maps SDK draws it as an image or something like this. But there is a quite simple solution:

You have to create a custom view with buttons and whatever you need to be displayed in your info window.
Add it as a subview in your mapView(mapView: GMSMapView, didTapMarker marker: GMSMarker) method. You can set a position of a custom view by getting a coordinates of a marker tapped with a help of mapView.projection.pointForCoordinate(marker.position)

Your custom view possibly has to change it position by following camera position, so you have to handle mapView(mapView: GMSMapView, didChangeCameraPosition position: GMSCameraPosition) where you could easily update your custom view position.

var infoWindow = CustomInfoView()
var activePoint : POIItem?

func mapView(mapView: GMSMapView, didTapMarker marker: GMSMarker) -> Bool {
    if let poiItem = marker as? POIItem {
    // Remove previously opened window if any
        if activePoint != nil {
            infoWindow.removeFromSuperview()
            activePoint = nil
        }
        // Load custom view from nib or create it manually
        // loadFromNib here is a custom extension of CustomInfoView
        infoWindow = CustomInfoView.loadFromNib()
        // Button is here
        infoWindow.testButton.addTarget(self, action: #selector(self.testButtonPressed), forControlEvents: .AllTouchEvents)

        infoWindow.center = mapView.projection.pointForCoordinate(poiItem.position)
        activePoint = poiItem
        self.view.addSubview(infoWindow)
    }
    return false
}

func mapView(mapView: GMSMapView, didChangeCameraPosition position: GMSCameraPosition) {

    if let tempPoint = activePoint {
        infoWindow.center = mapView.projection.pointForCoordinate(tempPoint.position)
    }

}