
Alert!
Google has discontinued the use of unsigned api requests. This means you must register an account with Google API service and get an API Key of your own.
Then you must include that API key code with all requests by placing &key=[your api key code]
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 Idea
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.
The Basics of Google Static Maps API
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
To add additional parameters we need to separate them by an ampersand “&” like this…
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.
Areal View (Static Maps API)
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
Bringing it all together
Now that you understand the basics of how to put the API call together, lets do it!
Base API Address | https://maps.googleapis.com/maps/api/staticmap |
Center Parameter | center=123+main+st+sometown+nj |
Maptype Parameter | maptype=setellite |
Zoom Parameter | zoom=19 |
Size Paremeter | size=640×300 |
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.
Google StreetView API
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.
Full API URL (with parameters)
https://maps.googleapis.com/maps/api/streetview?size=640x300&location=310+whippany+rd+whippany+nj&fov=75
API URL Parts
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
Putting it together
Base API Address | https://maps.googleapis.com/maps/api/streetview |
Location Parameter | location=310+whippany+rd+whippany+njj |
Size | size=640×300 |
FOV Parameter | fov=75 |
https://maps.googleapis.com/maps/api/streetview?size=640x300&location=310+whippany+rd+whippany+nj&fov=75
And here is an example of the image you will get from the API.
The Podio Calculation Field
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.
Images in Calculation Fields
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
""
Street View
""
Pulling in the Property Address
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
" + ")"
Street View
" + ")"
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.
Final Thoughts
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!
Share this Post
- Suspended From YouTube – for no reason - April 11, 2022
- Make Calls and Send Texts in Podio using smrtPhone - April 26, 2019
- Email Marketing with Podio and ConvertKit: Dealing with Unsubscribes - February 27, 2019
Comments 19
Scott,
As always man, I really appreciate these small but POWERFUL tips you’re always willing to share with like minds! Continue to do great things, and I wish you the best in your REI business!
R,
Arnell
Thanks for the tip. It was working previously but now, I’m not getting the image view in podio. Not sure why
Author
Are you getting anything in your calc field now? I’ve experienced an occasional outage or two with google maps api before but it always comes back eventually.
Appreciate the tip! Super helpful.
Great tip Scott. The only issue I’m having is the aerial view is off the coast of Africa for every address. Any idea why that happens?
Author
my guess is that you spelled a parameter name wrong or formatted the string wrongly somehow. Can you cut and paste what you have so I can take a look?
Excellent tip Scott. With the flood of information we are forced to process in today’s world, time saving tips like this coupled with systems like Podio are the keys to investor success today. Nice job
Streetview works perfectly, but nothing is being returned for Areal View
Author
Hi Katrina,
Would you mind taking a screen shot of your calculation fields code? I might be able to spot a problem if I could see it.
Hi Scott,
Great tip! I noticed a few people had some trouble with the aerial views, and I did as well. In comparing the URLs throughout your post, I found that I had to change ‘Center’ to lowercase ‘center’ from the code provided at the end of the post (under Pulling in the Property Address), and then the aerial views started working for me.
So from this:
“ + “)”
to this:
“ + “)”
Author
Thanks Lauren! I fixed it in the post so it is now “center”.
As always Scott providing great content and new ways to make our jobs easier virtually. Thank you for the write up and full explanation of why it works the way it does. I will share this blog post on Podio FB group later tonight.
Great tip Scott! My aerial view is now working. There sure is a lot of information to absorb in the Podio platform. Thanks for the time saver!
Author
There sure is Darrel! I learn something new every day while building my REIFlow system.
Great tip! Thanks for the intel and easy coding explanation!
Thanks for your hard work. The street view works in the desktop browser, but not in the mobile app. Any Ideas?
Author
As far as I know, it’s just a limitation of the podio mobile app.
Hi Scott.
I see that the free version of the API is no longer available as the street view no longer populates in Podio.
Do you know how to set up the paid version?
Author
Adriel,
Sometime over the summer, Google did block API calls that did not have an API Key value attached to the requesting call. Google wants you to sign up for an API Account with them, get an API Key and use that. From my understanding if you are only requesting Static images then the service is still free though. Don’t quote me on that though. Take a look at this discussion about it.
https://help.podio.com/hc/en-us/community/posts/360022558352-Trouble-with-Google-Street-view-giving-error