How to display static google map on android imageview?

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.


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.


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) {

} 


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;
    }

Tags:

Android

Recent Posts