Native Shopify Mobile App with 20 new features
Kickstart your hyperlocal marketplace in Corona pandemic with a starter guide
Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 18.104.22.168 release ready!
Owner and Founder. Opencart
In this blog on google map, we are going to add custom info window on a map marker using GoogleMap.InfoWindowAdapter interface. The idea of adding custom info window is to add something that has more meaning instead of a simple “dull” title.
If you want to setup Google map in your existing project I recommend you to read this. Once the Google map is added to your project your activity or fragment (depends on where you are displaying your map), your activity or fragment will look like this:
Now we have an instance of googleMap in the onMapReady callback. We can add markers and perform any other operation from here onwards. But how to add custom info window.
Let us give you an example of how the map looks after adding custom info window:
Pretty cool, huh.
Now as I said earlier we can perform any operation on google map in onMapReady. All we need to do is to setInfoWindowAdapter on google map. Here is how it looks:
here, item_oman_post_address_map_info_window is the layout that has been used in the info window of a marker. You can inflate any view, update the content like setting text, color etc. Same thing is done by us in getInfoContents() using Android data binding.
Yes, we cannot perform events and click operation on the view added inside the info window of the marker. But the whole info window is clickable by default. All you need to do is to setOnInfoWindowClickListener on the google map. The method onInfoWindowClick gives the marker instance of selected item window. And we can use the details of the marker to predict which item window is tapped.
Yes, that’s true. Here is how your view looks no matter what height and width you have set to the inflated view.
Sad but true. It ignores the layout dimensions and margin and your views are clipped off. You can prevent this by adding a 9.png at the background of the root of inflated view in info window container. Here is 9.png sample:
As you can see the image is scalable both horizontally and vertically so there is no issue what are the dimensions of the view that it can hold.
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.