Call Us 1-514-500-7372

How to Embed Google Street View in Your Website

We live in a world in which it's possible to find out almost anything about a business without setting foot outside of our homes. Thanks to tools like Google My Business, people can easily find their favorite business's addresses and hours of operation.

Now, however, people expect to find more than addresses and hours of operation. New technology has made virtual tours a reality, so businesses need to be ready to make use of them.

As luck would have it, Google Street View has already made the incorporation of external virtual tours easy for businesses. Adding a street view of your business is as easy as embedding a Google-powered virtual tour into your site.

And exactly how easy is the embedding process? Stick around for a minute or two and you'll find out.

 

 

Need a Website?

 

 

Go To Google Maps

The first step to embedding Google Street View into your website is fairly simple. You just have to take a trip to Google Maps. Once there, you can search a location as you normally would.

In this case, of course, the location you search for should be the one you're looking to embed into your site.

 

Enter Street View Mode

After you've successfully searched for the location, you'll have to enter Street View mode. There won't be a label which reads “Street View,” but you'll see an image of a street at the bottom of the panel on the left side of the page. Click this image and you'll enter Street View Mode.

There is also another route users can take to Street View Mode. It is perhaps a more difficult route, but we'll share it here since it's viable and some of you might be used to taking this route.

For this method, you'll also have to search for a location. After you've done so, you'll see the map that you usually do.

Here's where things start to differ from our first method. Instead of clicking on the image of the street, find the icon of the orange man on the screen. Many of you have probably seen it before, but you probably haven't taken serious notice of it.

This icon is sometimes near the upper-left side of the screen, but it can also be in the lower right-hand corner. Click this icon and drag it to the location which you want to get a street view of. Doing so should give you the same results as the first method.

This method might be easier for some people, but it can be more difficult for others. This is because dragging the icon to the exact location you entered is tricky even with the location marker on the screen. That said, use whichever method makes you comfortable.

 

google street view selection

Click The Options Button

When you enter Street View, you should see an enlarged version of the image you clicked on. You'll see a small box in the top left-hand which will show the address of the location you searched.

You'll see three vertical dots in the corner of that small box. If you click them, a menu will appear. Several options will appear, but you'll be looking for the one which mentions sharing and embedding the image.

 

google street view example

Image Size

If you correctly completed the last step, a small box should have popped up in middle of your screen. It should have two tabs, the first of which will allow you to share an image to the link. The second tab, which allows users to embed images, is the one you want.

Click that tab and the box will get larger. You'll see a smaller version of the image you're trying to embed into your site. You'll also see a link in a box above that image.

That link isn't, however, necessarily the link that you want to use for your site. If you look closely, you'll see that it's a medium-sized image, which might not be ideal for your site.

Fortunately, Google Street View lets users choose between small, medium, and large images. Users just have to click on the size in order to see a drop-down menu which reveals the rest of the sizes. You'll also notice that there's a choice to use a custom size, which we'll talk more about in the next section.

 

google street view HTML screen

 

 

Custom Sizes

If you select the “Custom Size” option, you'll be required to enter your desired dimensions into the provided boxes. Once you've entered these dimensions, you'll be able to preview the size you've chosen by clicking the “Preview Actual Size” option.

Don't be alarmed if a new window pops up when you click this option. This is to be expected.

 

HTML Code

Once you have selected a size, copy the image code. You can now head on over to the HTML code for the page you wish to put the image on. Find the section of the code which corresponds to where you want to place the image and paste the code there.

If you're not familiar enough with HTML code to paste it yourself, have someone help you with it. You can also take a quick HTML tutorial since it'll be pretty easy to find out where to place the code after you do.

 

Check Out Your Page

Your work isn't done yet. You may have pasted the code in, but you should always check your site afterward to make sure that all is well.

You should make sure that your image is the right size and that it doesn't hurt any of the page's design elements. You should also make sure that the code hasn't caused any errors on your page. If it has, go back and verify that you correctly pasted the code in.

 

Enjoy Your Embedded Google Street View

Clients who come to your site will now be able to take a virtual tour of the outside of your business's building, and you have Google Street View to thank. Your customers will be happy to get a glimpse of the area outside of your building, and you'll be able to get more free traffic as well.

Now it's time to take the virtual tours you offer to the next level. Instead of just allowing customers to tour the outside of your buildings, you should think about letting them tour the inside as well.

And how should you go about accomplishing a thing like that?

By contacting us of course. We specialize in internal virtual tours, and if you call us at 514-500-7372, we'll work with you to get a virtual tour of your building on its feet.

 

Comments on How to Embed Google Street View in Your Website