How to load a Google maps static map using Picasso?

Question

In my Android app I use Picasso to load images. This normally works perfectly well.

Today I tried loading a static image from the google maps api, but this doesn't seem to work. When I open the example link as provided on their info page , I get to see the static map image perfectly well. When I load it in my Android app using the line below, I get nothing at all.

Picasso.with(getContext()).load("http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=370x250&maptype=roadmap%20&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318%20&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=false").into(mapView);

I also tried to download the image and uploading it to my personal webspace, from which it loads perfectly well , but somehow, it doesn't seem to load directly from the direct google API url.

Does anybody know why this is so, and how I can solve it?

Answer 1

The only programmatic point-of-failure that comes to mind is in parsing the URI. Looking at the current Picasso code ( https://github.com/square/picasso/blob/master/picasso/src/main/java/com/squareup/picasso/Picasso.java ) I see the following:

  public RequestCreator load(String path) {
    if (path == null) {
      return new RequestCreator(this, null, 0);
    }
     if (path.trim().length() == 0) {
      throw new IllegalArgumentException("Path must not be empty.");
    }
    return load(Uri.parse(path));
  }

So I'd first debug

Uri.parse("http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=370x250&maptype=roadmap%20&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318%20&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=false")

and see what that Object looks like. Does it drop or confuse any of your parameters?

If that doesn't lead you anwhere, try downloading the file manually using a HttpClient [or similar]. Then at least you can fully debug the request/response.

Also, I know Google maps has some limits -- are you sure you haven't reached them?

Answer 2

• replace http with https
• replace | with %7C
• add api key

Answer 3

The .loadMap() function has many declared variables. This is the heart of the whole process.

So what is required for the static maps API to give us an image is that we make an http request with a given url, for which an image response (URL) is received. Let us run through the meaning and utility of these variables. Yes, all of them have a completely different meaning!

The mapUrlInitial variable is always the same while making an API call. It has a query of center ( ?center ) which specifies that we want the location to be centered in the map.

The mapUrlProperties variable contains a string where you control the actual zooming of the image response you will get, the size ofthe image and the color of the marker which will point out our place.

The mapUrlMapType variable is a string where you can actually determine the marker size you want and the type of the map. We are using a roadtype map in the app.

Finally latLong is a string which concatenates the latitude and the longitude of the place we want to pinpoint!

We then concatenate all of these strings to form a feasible Url. The Url is then loaded as we have seen above, in the Picasso code. One thing we can notice is that an event object is always required for all of this to happen, because we are able to fetch the position details using the event object! Final Code:-

fun loadMap(event: Event): String{
  //location handling

  val mapUrlInitial = “https://maps.googleapis.com/maps/api/staticmap?center=”

  val mapUrlProperties = “&zoom=12&size=1200×390&markers=color:red%7C”

  val mapUrlMapType = “&markers=size:mid&maptype=roadmap”
  val latLong: String = “” +event.latitude + “,” + event.longitude
  return mapUrlInitial + latLong + mapUrlProperties + latLong + mapUrlMapType

}
//load image

Picasso.get()

      .load(loadMap(event))

      .placeholder(R.drawable.ic_map_black_24dp)

      .into(rootView.image_map)