Quick Podio Tip: Get Property Images using Google MAPS API

Scott Costello All, Blog, Featured 17 Comments

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

Note: The use of ‘+’ signs in between the words of the address. When dealing with URLs, the internet does not like having spaces. If you type the URL into your browser bar, your browser will actually auto convert the spaces to plus signs. However, in a Podio Calculation field this is not the case. I will show you a trick later to make sure that everything will work fine.

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…

![No Image]("<url of the image>")

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

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

"![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.

Note: Sometimes when cutting and pasting into Podio, the quotes (“) don’t paste correctly. To fix this you’ll just have to delete and retype in the double quotes.

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

Follow me

Scott Costello

Scott is a part time wholesaler, but full time real estate investing addict! As his family grows and his free time shrinks,He has been slowing building his wholesaling business over the past 7 years in between life events.Drive, dedication and never giving up are his strengths.
Follow me

Latest posts by Scott Costello (see all)

Comments 17

  1. 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

    1. Post
      Author
    1. Post
      Author
  2. 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

    1. Post
      Author
    2. 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:
      “![No Image](https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&zoom=19&size=640×300&Center=” + encodeURIComponent(@Address) + “)”

      to this:
      “![No Image](https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&zoom=19&size=640×300&center=” + encodeURIComponent(@Address) + “)”

      1. Post
        Author
    1. Post
      Author
    1. Post
      Author

Leave a Reply to Scott Costello Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badge