Google Street View is one of the coolest things Google has come out with since their initial Google Maps release. As many of you already know, Google started to take photos of streets not unlike A9 and Microsoft did before. Except the way Google implemented it on Google Maps actually made it very usable, quick and interactive.
It is obviously a very powerful neighborhood visualization tool and should be in every real estate agent's toolbox for online, virtual listing presentation.
Up till recently, there was no way to use it in your own blog or website other than by linking to Google itself for the Steet View photos. While they still do not provide API access for full integration with 3rd party applications, they have a kind of hidden, not too promoted feature which enables you to embed an interactive "Street View" widget of any location where they have coverage. Below is a step by step tutorial on how to actually do just that:
1) Check if Street View is available for your location
Go to http://maps.google.com, type in the address and see if the Street View button appears on the top right.
2) Switch to Street View
If Street View is available, drag the little yellow icon to the location where you want your viewpoint to be set . The streets with "Street View" capability will be highlighted once you click the "Street View" button. Drag the person-icon to a location on one of the highlighted streets. As you will see it in the next step, the actual, current Street View will be provided as widget, not your initial location. In other words, fine tune the location before you continue to the next step. The screen shot below is a random location of Marina Blvd in San Francisco:
3) Get and customize the embed code
Click the "Link to this page" link above the map on the right. No mention of getting the widget. This is a little bit of a hidden feature at this point, I guess, due to the somewhat limited coverage and some sort of testing phase at Google.
The second text box contains the default iframe code, which you can copy and paste just like that. Alternatively, you can further customize the widget. Click the link: "Customize and preview embedded map"
There is another feature, which can be very useful, but is not obvious as an option on the configuration screen. In some design layouts, you may want to have a full bleed 100% width for the widget. Just take the code Google provides and replace the width="xyz" with width="100%". The Street View widget's width will automatically scale to whatever design you embed it into.
4) Embed the widget into your website or single property website
For the sake of this tutorial and as a shameless plug, I am going to use our own, RealBird Listing Publisher single property website builder service as an example (it's free so go ahead and try it out yourself) Since the embed code is a standard iframe HTML snippet, you can use it in your ActiveRain or Localism post and your website or blog as well.
Login at RealBird (or get a free account in a few seconds).
Add a new listing or edit an existing one. On the listing editor page, click the Embedded Media tab (it can be used for any widgets: video, slideshow, audio, iframe, in this case we are going to embed the Street View into a listing website)
Enter "Street View" in the "Tab text" field and paste the embed code into the large text box, the one you copied . "Publish" or "Save as draft" and your listing website now shows Google Street View. Easy, elegant and absolutely cool. See it in action below. Listing is courtesy of Joe Parsons, Coldwell Banker. Thanks for letting us use it for this tutorial.
See it in action here on the RealBird single property website (click the Street View tab)
I hope you find this helpful. I personally love the idea that Google provides this amazing feature as a widget option already. I am certain, they are going to add this to their API (and we'll be the first one to use it) but until then, this is a very easy and quick way to start utilizing the Street View in your real estate online marketing.
-- Zoltan Szendro
Comments(2)