CODEWITHSUNDEEP
android
Adnan
Adnan

Reputation: 2996

How to display static google map on android imageview?

I want to display a static google map on an imageview. Something similar to "Whatsapp" showing while share the location. How can I do this?

Upvotes: 50

Views: 54889

Answers (8)

pcans
pcans

Reputation: 7651

Google offers the static map API for that you need an API key.

You can download a dynamically configured bitmap from the web, store it on the filesystem or on memory, then get drawable from it in order to set it to the ImageView.

You need to generate an url from your coordinates to load the data from the web using this url. Exemple for a 200x200 bitmap showing the eiffel Tower in Paris:

String latEiffelTower = "48.858235";
String lngEiffelTower = "2.294571";
String url = "http://maps.google.com/maps/api/staticmap?center=" + latEiffelTower + "," + lngEiffelTower + "&zoom=15&size=200x200&sensor=false&key=YOUR_API_KEY"

StackOverflow already have some answer on how to download an image from the web in order to display it in an image view: link

You can find here the documentation for the Google Static Maps API.

Upvotes: 105

Md Mazharul Islam
Md Mazharul Islam

Reputation: 11

String url = "https://maps.googleapis.com/maps/api/staticmap?" +
          "center=40.714%2c%20-73.998" +
          "&zoom=12&size=400x400" +              
          "&key=YOUR_API_KEY_GOES_HERE;
Picasso.get()
            .load(url)
            .into(imageView, new Callback() {
                @Override
                public void onSuccess() {

                }

                @Override
                public void onError(Exception e) {
                    Toast.makeText(context, "Error to load Maps: " + e.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });

Upvotes: 0

Vinil Chandran
Vinil Chandran

Reputation: 1561

Web view is my suggestion for it.

Create an html file static_map.html inside html folder in asset folder

its content may be like the below

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    html,body{
        padding:0;
        margin:0;
    }
    .map{
        position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
</style>
</head>

<body>
<img class="map" src="REPLACE_HERE" >
</body>
</html>

Then programmatically create a static map URL and replace REPLACE_HERE string with it. Then load it on the web view. This will reduce our effort very much.

The code is as follows

try {
    String url ="https://maps.googleapis.com/maps/api/staticmap?";
    url+="&zoom=13";
    url+="&size=600x300";
    url+="&maptype=roadmap";
    url+="&markers=color:green%7Clabel:G%7C"+latitude+", "+longitude;
    url+="&key="+ YOUR_GOOGLE_API_KEY;

    InputStream is = context.getAssets().open("html/static_map.html");
    int size = is.available();
    byte[] buffer = new byte[size];
    is.read(buffer);
    is.close();
    String str = new String(buffer);
    str = str.replace("REPLACE_HERE", url);
    wv_map.getSettings().setJavaScriptEnabled(true);
    wv_map.loadDataWithBaseURL("", str, "text/html", "UTF-8", "");
} catch (IOException e) {

}

Upvotes: 5

Alex
Alex

Reputation: 480

Also, another solution is the Picasso library: "A powerful image downloading and caching library for Android"

You give an image url to Picasso and then It does a GET petition and it loads the image. If the petition fails then Picasso can set a default image.

You can even set a progress animation while the image is loading.

It is a good and clean solution.

A example:

ImageView ivUrl = (ImageView) view.findViewById(R.id.iv_photo);

Picasso.with(getContext()).cancelRequest(ivUrl);

Picasso.with(getContext())
    .load(imageUrlString)
    .error(R.drawable.ic_error)
    .placeholder(R.drawable.progress_animation)
    .into(ivUrl);

Upvotes: 0

Nicolas Adrian
Nicolas Adrian

Reputation: 568

You can also display a static image natively with the SDK now (this was added in December 2014): https://developers.google.com/maps/documentation/android/lite

That will result in a MapView.

Upvotes: 18

Hoang Dung Do
Hoang Dung Do

Reputation: 9

As refered by @pcans, i really like his solution. You can use string as URL to load your image in ImageView. I suggest a third party library for image loading : https://github.com/koush/ion

Hope that it can help you :)

Upvotes: -1

user1494912
user1494912

Reputation: 350

public static Bitmap getGoogleMapThumbnail(double lati, double longi){
        String URL = "http://maps.google.com/maps/api/staticmap?center=" +lati + "," + longi + "&zoom=15&size=200x200&sensor=false";
        Bitmap bmp = null;
        HttpClient httpclient = new DefaultHttpClient();   
        HttpGet request = new HttpGet(URL); 

        InputStream in = null;
        try {
            in = httpclient.execute(request).getEntity().getContent();
            bmp = BitmapFactory.decodeStream(in);
            in.close();
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (ClientProtocolException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        return bmp;
    }

Upvotes: 19

AndroidDanger
AndroidDanger

Reputation: 1049

Firstly you take the image of your map which you show in drawable folder after that use as a background of that imageView.

Upvotes: -5

Related Questions