How to display static google map on android imageview?
I want to display a static go开发者_高级运维ogle map on an imageview. Something similar to "Whatsapp" showing while share the location. How can I do this?
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.
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;
}
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) {
}
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);
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();
}
});
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 :)
Firstly you take the image of your map which you show in drawable folder after that use as a background of that imageView.
加载中,请稍侯......
精彩评论