Quick Podio Tip: Get Property Images using Google MAPS API

https://maps.googleapis.com/maps/api/staticmap?center=120+whippany+rd+whippany+nj&key=987asdfhads987fhhujhiuywe97

This is one of those tips that is so easy to implement you can do it in 2 minutes. There is no reason not to do this in your Podio setups. Being able to instantly view a property as soon as you type in an address is top notch stuff! In a previous tutorial I showed you how to pull the complete address information from Google Maps API. In this tip we revisit the Google Maps API, but this time we are going to look at the Street View Image and Static Maps API.

The reason why this is so simple is that all we are really doing here is linking to an image on another website. In HTML syntax this would be something like this…

<img src="http://somesite.com/image.png" alt="" />

Here though we are linking to the Google Maps API address. Now to get the image of the house we want we need to pass in some additional information…or parameters. I’ll go over the parameters of each of the Street View and Areal view in a bit. But the basics of what we will pass in are…

• Address
• Image Size
• Zoom

There are more but I want to keep this tutorial simple and only cover the basics.

Before I show you the code to use I wanted to give you a basic idea of how the API calls work. I think this is important to have a general understanding of. If for nothing else but to make you more confident in what you are actually doing.

So lets jump right in here…

The Google Static Maps API base address is this…

https://maps.googleapis.com/maps/api/staticmap

To this address we need to add the parameters in order to tell Google what property we want to view. We signify the start of the parameters by using a question mark ‘?’ .  

https://maps.googleapis.com/maps/api/staticmap?

Now we add the paremeters in a Name=Value style.

https://maps.googleapis.com/maps/api/staticmap?center=120+whippany+rd+whippany+nj

https://maps.googleapis.com/maps/api/staticmap?center=120+whippany+rd+whippany+nj&size=600x300

So that is the basics of how the Google Static Maps API works. Now it is just a matter of adding the desired parameters to the call and you’ll instantly have pictures of your leads.

This API image will give you the overhead view of the house. I know the standard Podio Location field gives you the overhead view, but it only shows the roadmap. I want to see the house!

Let’s take a look at the complete API URL that we will use. I’ll break down the parameters below so you have a good idea what is going on here.

https://maps.googleapis.com/maps/api/staticmap?center=120+whippany+rd+whippany+nj&maptype=satellite&zoom=19&size=600x300

Center (required) 

You will use this parameter to pass in the property’s address. What it basically does is center the map on your property.

center=120+whippany+rd+whippany+nj

MapType

Defines the type of map to construct. There are several possible maptype values, including roadmap, satellite, hybrid, and terrain. The Podio Location field uses the RoadMap type. For our purposes we want to use Satellite.

maptype=satellite

Zoom

Defines the zoom level of the map, which determines the magnification level of the map. This parameter takes a numerical value corresponding to the zoom level of the region desired.

Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) and 21+ (down to streets and individual buildings) are possible within the default roadmap view

The following list shows the approximate level of detail you can expect to see at each zoom level:

1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings

zoom=19

Size

Defines the rectangular dimensions of the map image. This parameter takes a string of the form {horizontal_value}x{vertical_value}. For example, 500×400 defines a map 500 pixels wide by 400 pixels high.

The maximum size you can use with the free API access (which is what we are using here) is 640×300.  If you try to use larger, it’ll just return the 640×300 image.

size=640x300

Now that you understand the basics of how to put the API call together, lets do it!

Combining these parts (and remembering to start the parameters with a ‘?’ and separating each parameter with a ‘&’) we get…

https://maps.googleapis.com/maps/api/staticmap?center=123+main+st+sometown+nj&maptype=satellite&zoom=19&size=640x300

This is the image you will get if you cut and paste the url into your browser.

The Google Streetview API works the exact same way as the StaticMaps API that we just went over. All the pieces are the same, except that the base url changes slightly and the parameters are different. Same formula though.

I’m not going to rehash the same in-depth explanation here. I am just going to get right into the parts.

https://maps.googleapis.com/maps/api/streetview?size=640x300&location=310+whippany+rd+whippany+nj&fov=75

location can be either a text string (such as Chagrin Falls, OH) or a lat/lng value (40.457375,-80.009353). The Google Street View Image API will snap to the panorama photographed closest to this location. Because Street View imagery is periodically refreshed, and photographs may be taken from slightly different positions each time, it’s possible that your location may snap to a different panorama when imagery is updated.

location=123+main+st+anytown+nj

size specifies the output size of the image in pixels. Size is specified as {width}x{height} – for example, size=600×400 returns an image 600 pixels wide, and 400 high.

size=640x300

fov (default is 90) determines the horizontal field of view of the image. The field of view is expressed in degrees, with a maximum allowed value of 120. When dealing with a fixed-size viewport, as with a Street View image of a set size, field of view in essence represents zoom, with smaller numbers indicating a higher level of zoom.photograph was taken.

fov=75

And here is an example of the image you will get from the API.

The final step, and the reason you came to this post is putting these API Calls into Podio. It’s pretty basic, but there are a couple of “advanced” tricks to get this to work. I will break it apart and put it back together so you can better understand how it works.

One of the many tricks of the Podio calculation field is its ability to pull in and display images. The general code syntax you’ll need to enter into the calc field is this…

So now lets translate this into using it with the Google API url that we previously put together..

Areal View

"![No Image](https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&zoom=19&size=640x300&center=123+main+st+sometown+nj)"

Street View

"![No Image](https://maps.googleapis.com/maps/api/streetview?size=640x300&fov=50&location=310+whippany+rd+whippany+nj)"

Of course the point of all of this is to get the image of each property that you entered in the address for in Podio. To do this we need to concatenate in the address. Also this is where I will show you the trick to make sure the address is properly formatted for the API call.

Areal View

"![No Image](https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&zoom=19&size=640x300&center=" + encodeURIComponent(@Address) + ")"

Street View

"![No Image](https://maps.googleapis.com/maps/api/streetview?size=640x300&fov=50&location=" + encodeURIComponent(@Address) + ")"

The function encodeURIComponent is a javascript function that makes any string of text okay to have in an URL. It replaces any spaces with ‘+’ signs among other things as well.

So that is it! You can copy and past the code above into your podio calculation fields. The only extra thing you’ll have to do is Retype in your @Address (or what ever you called your address field) because the field tokens will not paste correctly.

I know this post could have been much much shorter. Most of you only will care about getting the code to cut and paste into your Podio Apps. That’s cool and that is what I did the first time.

HOWEVER…understanding how this works will help you greatly when you decide to do more advanced things with a calculation field. This feature opened my eyes to what can be done and I hope it does the same for you.

If you found this post useful, I’d love you forever if you would share it…Many Thanks!