Thursday, August 1, 2013

Display Custom Info Window with ImageView on Google Map V2

Display Custom Info Window with ImageView on Google Map V2

 


To display image on Google Map V2 Bubble, we will be integrating Universal Image Loader
In Map V2, to display custom bubble, there is a InfoWindowAdapter class.

Implement the InfoWindowAdapter class and override 2 methods :
1. getInfoContents(Marker marker)
2. getInfoWindow(Marker marker)

Set InfoWindowAdapter
googleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter());
Store Marker id in variable with each marker image URL. So, in CustomInfoWindowAdapter class, it can be accessed using Marker Id. Fro now we will store id in Hashtable:
markers.put(hamburg.getId(), "http://img.india-forums.com/images/100x100/37525-a-still-image-of-akshay-kumar.jpg");
Create custom_info_window.xml layout. It will be displayed when click on Marker.
<?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:background="@drawable/custom_info_bubble"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/badge"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="5dp"
        android:adjustViewBounds="true" >
    </ImageView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:singleLine="true"
            android:textColor="#ff000000"
            android:textSize="14dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/snippet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ff7f7f7f"
            android:textSize="14dp" />
    </LinearLayout>

</LinearLayout>

CustomInfoWindowAdapter 

package com.ngshah.goglemapv2withlazyloading;

import java.util.Hashtable;

import android.app.ActivityManager;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.ngshah.goglemapv2withlazyloading.R;
import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.cache.memory.impl.FIFOLimitedMemoryCache;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;
import com.nostra13.universalimageloader.core.assist.SimpleImageLoadingListener;

public class MainActivity extends FragmentActivity {

    private GoogleMap googleMap;
    private final LatLng HAMBURG = new LatLng(53.558, 9.927);
    private final LatLng KIEL = new LatLng(53.551, 9.993);
    private Marker marker;
    private Hashtable<String, String> markers;
    private ImageLoader imageLoader;
    private DisplayImageOptions options;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        googleMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map))
                .getMap();
        
        initImageLoader();
        markers = new Hashtable<String, String>();
        imageLoader = ImageLoader.getInstance();
        
        options = new DisplayImageOptions.Builder()
            .showStubImage(R.drawable.ic_launcher)        //    Display Stub Image
            .showImageForEmptyUri(R.drawable.ic_launcher)    //    If Empty image found
            .cacheInMemory()
            .cacheOnDisc().bitmapConfig(Bitmap.Config.RGB_565).build();
        
        if ( googleMap != null ) {
           
            googleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter());
           
            final Marker hamburg = googleMap.addMarker(new MarkerOptions().position(HAMBURG)
                        .title("Hamburg"));
            markers.put(hamburg.getId(), "http://img.india-forums.com/images/100x100/37525-a-still-image-of-akshay-kumar.jpg");
           
            final Marker kiel = googleMap.addMarker(new MarkerOptions()
                        .position(KIEL)
                        .title("Kiel")
                        .snippet("Kiel is cool")
                        .icon(BitmapDescriptorFactory
                            .fromResource(R.drawable.ic_launcher)));
            markers.put(kiel.getId(), "http://www.yodot.com/images/jpeg-images-sm.png");
             
            googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(HAMBURG, 15));
            googleMap.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);
        }
    }
    
    private class CustomInfoWindowAdapter implements InfoWindowAdapter {

        private View view;

        public CustomInfoWindowAdapter() {
            view = getLayoutInflater().inflate(R.layout.custom_info_window,
                    null);
        }

        @Override
        public View getInfoContents(Marker marker) {

            if (MainActivity.this.marker != null
                    && MainActivity.this.marker.isInfoWindowShown()) {
                MainActivity.this.marker.hideInfoWindow();
                MainActivity.this.marker.showInfoWindow();
            }
            return null;
        }

        @Override
        public View getInfoWindow(final Marker marker) {
            MainActivity.this.marker = marker;

            String url = null;

            if (marker.getId() != null && markers != null && markers.size() > 0) {
                if ( markers.get(marker.getId()) != null &&
                        markers.get(marker.getId()) != null) {
                    url = markers.get(marker.getId());
                }
            }
            final ImageView image = ((ImageView) view.findViewById(R.id.badge));

            if (url != null && !url.equalsIgnoreCase("null")
                    && !url.equalsIgnoreCase("")) {
                imageLoader.displayImage(url, image, options,
                        new SimpleImageLoadingListener() {
                            @Override
                            public void onLoadingComplete(String imageUri,
                                    View view, Bitmap loadedImage) {
                                super.onLoadingComplete(imageUri, view,
                                        loadedImage);
                                getInfoContents(marker);
                            }
                        });
            } else {
                image.setImageResource(R.drawable.ic_launcher);
            }

            final String title = marker.getTitle();
            final TextView titleUi = ((TextView) view.findViewById(R.id.title));
            if (title != null) {
                titleUi.setText(title);
            } else {
                titleUi.setText("");
            }

            final String snippet = marker.getSnippet();
            final TextView snippetUi = ((TextView) view
                    .findViewById(R.id.snippet));
            if (snippet != null) {
                snippetUi.setText(snippet);
            } else {
                snippetUi.setText("");
            }

            return view;
        }
    }

    private void initImageLoader() {
        int memoryCacheSize;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ECLAIR) {
            int memClass = ((ActivityManager) 
                    getSystemService(Context.ACTIVITY_SERVICE))
                    .getMemoryClass();
            memoryCacheSize = (memClass / 8) * 1024 * 1024;
        } else {
            memoryCacheSize = 2 * 1024 * 1024;
        }

        final ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                this).threadPoolSize(5)
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .memoryCacheSize(memoryCacheSize)
                .memoryCache(new FIFOLimitedMemoryCache(memoryCacheSize-1000000))
                .denyCacheImageMultipleSizesInMemory()
                .discCacheFileNameGenerator(new Md5FileNameGenerator())
                .tasksProcessingOrder(QueueProcessingType.LIFO).enableLogging() 
                .build();

        ImageLoader.getInstance().init(config);
    }
} 

113 comments:

  1. Nishant, thanks for this great example! But I have one question: imagine I would like to make my info window exactly the same as the original, and the only thing I would like to change is its background color and opacity. Do you think there would be a simpler way to do that?

    ReplyDelete
    Replies
    1. Great Article android based projects

      Java Training in Chennai

      Project Center in Chennai

      Java Training in Chennai

      projects for cse

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. Hello Nishant ,
    Perfect example .
    But i want to set googleMap.addMarker(new MarkerOptions().icon using Lazy loading .

    Thanks
    Parag

    ReplyDelete
  3. Hello Nishant, Thanks for your sharing.
    This is very helpful for me.

    Thanks!

    ReplyDelete
  4. Nice tutorial..pls add the date when it is posted... :)

    ReplyDelete
  5. Thanks for solution... Point is that on UniversalImageLoader and onLoadingComplete(), call getInfoContents(marker) and after it calls rerun infoWindow with loaded image... :)

    ReplyDelete
  6. getInfoWindow() -> onLoadingComplete() -> getInfoContents(marker). This call comes in loop as showInfoWindow() again call getInfoWindow. This increases memory consumption and GC get called continuously.

    instaead of calling getInfoContents(marker) explicitly, image.setImageBitmap(loadedImage) will work perfect.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  7. hi is there any way to get data in info window at multiple marker different data load from list

    ReplyDelete
  8. Hi!
    Thanks for your sharing,

    But I have problem in code:

    markers.put(hamburg.getId(), "http://img.india-forums.com/images/100x100/37525-a-still-image-of-akshay-kumar.jpg");

    I want picture url is a SDcard url...How do I change code?

    Thanks for all the help!

    ReplyDelete
  9. @drawable/custom_info_bubble is missing

    ReplyDelete
  10. Hi
    Thanks for sharing your code but i have a problem with onclick on textview in infowindow,Is it possible to make textview as a clickable in Infowindow?

    ReplyDelete
  11. * Project GogleMapV2WithLzyLoading:/home/jenya1/Downloads/GogleMapV2WithLzyLoading-master/project.properties:
    Library reference ../google-play-services_lib could not be found
    Path is /home/jenya1/Downloads/GogleMapV2WithLzyLoading-master/../google-play-services_lib which resolves to /home/jenya1/Downloads/google-play-services_lib

    ReplyDelete
  12. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    python training in Bangalore

    ReplyDelete
  13. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    msbi online training

    ReplyDelete
  14. I'm here representing the visitors and readers of your own website say many thanks for many remarkable

    Tableau online training

    ReplyDelete
  15. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.

    ReactJS Online Training

    ReplyDelete
  16. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    Sql server dba online training

    ReplyDelete
  17. Excellant post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it..
    Oracle DBA Online Training

    ReplyDelete
  18. nice blog
    get best placement at VSIPL

    get digital marketing and web development service
    seo network point

    ReplyDelete
  19. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.
    Software testing online training
    Software testing certification training
    Software testing online course
    Software testing training course

    ReplyDelete
  20. Thanks for sharing it.I got Very valuable information from your blog.your post is really very Informatve. I got Very valuable information from your blog.I’m satisfied with the information that you provide for me.

    Python Training in Pune
    Python Classes
    Python Placement
    Python Institute Pune
    Python courses

    ReplyDelete
  21. Nice post
    For Python training in Bangalore, Visit:
    Python training in Bangalore

    ReplyDelete
  22. Thanks for your excellent blog and giving great kind of information. So useful. Nice work keep it up thanks for sharing the knowledge.
    Visit us
    Click Here
    For More Details
    Visit Website
    See More

    ReplyDelete
  23. This is the exact information I am been searching for, Thanks for sharing the required infos with the clear update and required points. To appreciate this I like to share some useful information.python training in bangalore

    ReplyDelete
  24. Thanks for your excellent blog and giving great kind of information. So useful. Nice work keep it up thanks for sharing the knowledge.
    Devops training in Pune with placement

    ReplyDelete
  25. I am a regular reader of your blog and I find it really informative. Hope more Articles From You.Best Tableau tutorial video available Here. hope more articles from you.

    ReplyDelete
  26. Thanks a lot for sharing it, that’s truly has added a lot to our knowledge about this topic. Have a more success ful day. Amazing write-up, always find something interesting and here i want to share some thing about mulesoft training hyderabad .

    ReplyDelete
  27. Thanks for your excellent blog and giving great kind of information. So useful. Nice work keep it up thanks for sharing the knowledge.
    Visit us
    Click Here
    For More Details
    Visit Website

    ReplyDelete
  28. Thanks for your excellent blog and giving great kind of information. So useful. Nice work keep it up thanks for sharing the knowledge.
    Visit us
    Click Here
    For More Details
    Visit Website
    See More

    ReplyDelete
  29. Thanks loads for writting this kind of fantastic article.
    It's simply has plenty of insights and valueable informtion.

    click here formore info.

    ReplyDelete
  30. Such a terrific facts for blogger i am a professional blogger thanks…

    click here formore info.

    ReplyDelete
  31. Nice post. Thanks for sharing! I want humans to understand simply how excellent this facts is to your article.
    It’s thrilling content material and Great work.
    isaimini movies hd

    ReplyDelete
  32. Thanks for sharing it.I got Very valuable information from your blog.your post is really very Informative.I’m satisfied with the information that you provide for me.Software testing is a process ensure that the product is defect free.By reading your blog, i get inspired and this provides some useful information. Keep it up and best of luck for your future blogs posts.

    software testing institute in pune at 3ri Technologies

    ReplyDelete
  33. Thanks for sharing it.I got Very valuable information from your blog.your post is really very Informative.I’m satisfied with the information that you provide for me.Nice post. By reading your blog, i get inspired and this provides some useful information.

    sap mm training in pune with placement

    ReplyDelete
  34. After I initially commented I seem to have clicked on the -Notify me when new comments are
    added- checkbox and now every time a comment is added I receive 4 emails with the exact same comment.
    There has to be an easy method you are able to remove me from that service? Kudos!
    Click here to more info.



    ReplyDelete
  35. I think this is one of the most important info for me.And i am glad reading your article. But want to remark on few general things, The site style is good , the articles is really excellent and also check Our Profile for
    sql training courses and sql server training videos.

    ReplyDelete

  36. This post is really nice and informative. The explanation given is really comprehensive and informative. I want to share some information about the best oracle dba training and oracle weblogic tutorial training videos. Thank you .Hoping more articles from you.

    ReplyDelete
  37. Thanks for the informative article About Reactjs. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.

    Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

    ReplyDelete
  38. I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this servicenow training , I feel happy about it and I love learning more about this topic.

    ReplyDelete
  39. Thanks for sharing such informative guide on .Net technology. This post gives me detailed information about the .net technology.




    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery









    ReplyDelete
  40. I use Facebook, along with Twitter and YouTube, as an important piece of my social media strategy.  I have made many great contacts on Facebook, and usually log in a couple of times a day. Resurge Diet Supplement

    ReplyDelete
  41. Amazing Article ! I have bookmarked this article page as i received good information from this. All the best for the upcoming articles. I will be waiting for your new articles. Thank You !
    AWS training in Chennai

    AWS Online Training in Chennai

    AWS training in Bangalore

    AWS training in Hyderabad

    AWS training in Coimbatore

    AWS training

    AWS online training

    ReplyDelete


  42. Wow. That is so elegant and logical and clearly explained. Brilliantly goes through what could be a complex process and makes it obvious.I want to refer about the best msbi training in hyderabad

    ReplyDelete
  43. Good Post! , it was so good to read and useful to improve my knowledge as an updated one, keep blogging.After seeing your article I want to say that also a well-written article with some very good information which is very useful for the readers....thanks for sharing it and do share more posts like this.
    https://www.3ritechnologies.com/course/mern-stack-training-in-pune/

    ReplyDelete

  44. I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly.I want to share about Mulesoft training .

    ReplyDelete
  45. Good Post! , it was so good to read and useful to improve my knowledge as an updated one, keep blogging. After seeing your article I want to say that also a well-written article with some very good information which is very useful for the AWS Cloud Practitioner Online Training

    ReplyDelete
  46. Thanks for this valuable piece of information... Saved the day.
    Also sharing hands to help for DevOps Online Training

    ReplyDelete
  47. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    blockchain online training
    best blockchain online training
    top blockchain online training

    ReplyDelete
  48. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    blockchain online training
    best blockchain online training
    top blockchain online training

    ReplyDelete
  49. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    best mulesoft online training in usa

    ReplyDelete
  50. Cognex AWS Training in Chennai gives a wide comprehension of the ideas of AWS to make PC projects to determine questions and accomplish objectives on the planet.

    ReplyDelete
  51. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    top mulesoft online training

    ReplyDelete
  52. Thanks for your excellent blog and giving great kind of information. So useful. Nice work keep it up thanks for sharing the knowledge.
    DevOps Training in Chennai

    DevOps Course in Chennai

    ReplyDelete
  53. I think it could be more general if you get a football sports activity. ExcelR Data Science Course In Pune

    ReplyDelete
  54. Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. You’re doing a great job Man learn
    Pega Online Training
    Pega Online Course

    ReplyDelete
  55. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    mulesoft online training

    ReplyDelete
  56. Did you know that you can easily view the contents of your phone on your TV without a cable? With a screen mirror app you can easily do the screen mirroring from Android to TV. Check out www.screenmirroring.me to find out more.

    ReplyDelete
  57. Shreeja Health Care is leading manufacturer of Oil Maker Machine. Shreeja Oil Extraction Machine is able to extract oil from various seeds like peanuts, Coconut, Sesame, Soybean, macadamia nuts, walnuts, sunflower seeds, vegetable seeds flaxseed etc.

    ReplyDelete
  58. Keytexmachines is leading CNC Machining Job Work in surat With Excellent Quality, Cost Effective Price & Prompt Delivery. CNC Machining Job Work, CNC Turning Job Work, CNC Machine Service offered by Keytex machines, Surat.

    ReplyDelete
  59. Yami immigration is a well-known and experienced immigration consultant in Surat. We provide Immigration Services for many countries such as Italy, Canada, France, Australia, Germany, USA, Malaysia, New Zealand, and Singapore.

    ReplyDelete
  60. Dr. Vivek Galani is a leading expert in skin and hair. At hair transplant clinic in Surat Skin Care, Cosmetic Laser, Hair Transplant & Slimming Center, Dr. Galani offers the most advanced cosmetic and dermatologic care treatments. The clinic uses advanced FUE methods to produce high-quality hair transplants.

    ReplyDelete
  61. Shreeja Health Care is leading manufacturer of oil Maker Machine For Home. Shreeja Oil Extraction Machine is able to extract oil from various seeds like peanuts, Coconut, Sesame, Soybean, macadamia nuts, walnuts, sunflower seeds, vegetable seeds flaxseed et

    ReplyDelete
  62. Good Post! , it was so good to read and useful to improve my knowledge as an updated one, keep blogging. After seeing your article I want to say that also a well-written article with some very good information which is very useful for the readers.thanks for sharing it and do share more posts like this.


    IT Training in Pune with placements

    IT Training in Pune

    ReplyDelete
  63. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. I wanted to thank you for this websites! Thanks for sharing. Great websites!
    Data Science Training in Bangalore

    ReplyDelete
  64. I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!
    data analytics course in bangalore

    ReplyDelete
  65. I am a new user of this site, so here I saw several articles and posts published on this site, I am more interested in some of them, hope you will provide more information on these topics in your next articles.
    data analytics training in bangalore

    ReplyDelete
  66. Great post i must say and thanks for the information. Education is definitely a sticky subject. However, is still among the leading topics of our time. I appreciate your post and look forward to more.
    Data Science Course in Bangalore

    ReplyDelete
  67. Shreeja Health Care is leading manufacturer of Oil Maker Machine. Shreeja Oil Extraction Machine is able to extract oil from various seeds like peanuts, Coconut, Sesame, Soybean, macadamia nuts, walnuts, sunflower seeds, vegetable seeds flaxseed etc.

    ReplyDelete
  68. Keto Pills are the most popular type of weight loss product and chances are you’ve probably seen advertisements for keto products by now. These keto pure diet pills may help enhance your weight loss, boost your energy levels, and can make it easier for you to stick to your keto diet. Many of the most popular keto products contain exogenous ketones – ketones made outside of the body. These ketones are the fuel that your body burns instead of carbohydrates when you are on the keto diet. Check now the full Keto pure diet pills reviews for clear your doubt with full information. Some keto products may contain one or many other natural ingredients that may help boost your metabolism in addition to these exogenous ketones.

    ReplyDelete
  69. Skinnyfit is a brand renowned for creating collagen and powder supplements for weight loss. It has manufactured and worked on a vast number of weight-loss products, peptides, and collagen. Super Youth is a collagen peptide powder intended to promote more youthful skin, a healthy weight, and strong bones and joints. Check now Skinnyfit Super Youth Reviews. There has been more recent research into the potential health benefits of taking collagen, including for healthy hair, skin, nails, joint and bone health, gut health, and weight loss.

    ReplyDelete
  70. I’m glad you like my post! I learned many new things myself
    by cloudi5 is the digital marketing company in coimbatore

    ReplyDelete
  71. Actually your blog is very interesting; it contains extraordinary and remarkable data. I appreciated visiting your blog…

    DevOps Training in Hyderabad

    ReplyDelete
  72. thank you for sharing we are looking forward for more
    aws Training in Hyderabad

    ReplyDelete
  73. Amazing Article! I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
    Data science course in pune

    ReplyDelete
  74. I see some amazingly important and kept up to length of your strength searching for in your on the site
    data science training

    ReplyDelete