Use Walker widget to add Google Street View

The Walker widget can use specific coordinates or panorama ID. It takes a few minutes to get and enter the necessary data of the specific place and the panorama is displayed on your site. The Elementor widget has many options that allow you to manage even small details. You can specify the horizontal/vertical street view angle and zoom. Among other useful features: the width and height map customization, compass display, fullscreen display, motion tracking control for mobiles, autorotation and much more. The Walker plugin can be useful for any kind of site like Portfolio, blog, corporate website, creative agency, real estate listing or commerce.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Walker widget. You will find the widget at the end of the general section.

Widget icon

Drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content tab of the Walker widget, you can manage different features of Street View and map display settings.

Street View settings

The section offers to enter coordinates or panorama ID for a specific place and adjust various functions

Street View Source

There are two sources of street view. You can specify a specific place through the coordinates by specifying the Latitude and Longitude of the point. Get the coordinates of a place on Google maps.

The other way is a panorama ID. To get the ID, go to https://istreetview.com/ On the site, find the place on the map and copy the Panorama ID to paste in the widget settings.

How to get panorama ID

You can also add a custom description for the panorama view.

Horizontal angle

The slider allows you to set a different horizontal viewing angle. The available values ​​are from 0 to 360 degrees.

Vertical angle

The slider that allows you to set a different vertical viewing angle. The available values ​​are from -90 to 90 degree.

Zoom

The zoom slider provides a way to zoom within the image. The available values from 1 to 4.

Compass

The toggle to enable/disable the compass display on the view.

Compass display on the Street View widget

Zoom

The toggle to enable/disable the display of zoom buttons on the view.

Zoom buttons on the Street View

Address

The toggle to enable/disable the address display on the view. The option provides a textual overlay indicating the address of the associated location, and offers a link to open the location in Google Maps. 

Address info box on the Street View

Fullscreen

The option allows displaying the button to open Street View in fullscreen mode.

Links

The option provides guide arrows on the image for traveling to adjacent panorama images.

Guide arrows on the Street View

Motion Tracking Control

The toggle to enable/disable motion tracking control on mobile devices. On devices that support device orientation events, the Google Map API offers you the ability to change the Street View point of view based on the movement of the device. You can look around by moving their devices.

Motion Tracking

The toggle to enable/disable the motion tracking functionality.

Google Logo

The toggle to enable/disable the Google logo in the bottom left corner of the image.

Google Links

The toggle to enable/disable the Google links in the bottom right corner of the image.

Google links display on the Street View

Overlay

The toggle to enable/disable overlay layer for the map box which can be customized in different styles on the Style tab.

Caption

The option adds a new Caption tab with the settings for the header, subheader and description of the current block.

Rotation

The toggle to enable/disable autorotation feature of the panorama. When the feature is enabled the additional options can be customized: Stop after click function, Loop Rotation, Rotation Count, Direction of Rotation and Rotation Speed.

Side-By-Side View

The option allows you to display a map and street view side by side. This option is very useful for quick orientation and location of a specific place. When the feature is enabled, a new Map tab with settings is available.

Side-By-Side feature of the Walker widget

Map settings

  • Map Position – select one of the available map display positions(Left, Right, Above, Below) for different devices.
  • Initial zoom – specify the initial map zoom using the slider.
  • Fullscreen – the option allows displaying the button to open the map fullscreen mode.
  • Layers Switcher – the toggle to enable/disable the layers switcher on the map
Layers switcher on the map
  • Zoom – the toggle to enable/disable the display of zoom buttons on the map.
  • Google Logo – the toggle to enable/disable the Google logo in the bottom left corner of the map.
  • Google Links – the toggle to enable/disable the Google links in the bottom right corner of the map.

Caption settings

  • Header – the toggle to enable/disable the display of the header text.
  • Alignment – manage header text alignment (left, center, right) for desktop, tablet or mobile.
  • Textarea field – enter the header text of the current block.
  • HTML tag – select one of the available tags from the list for the header text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
  • Subheader – the toggle to enable/disable the display of the subheader text.
  • Textarea field – enter the subheader text of the current block.
  • Subheader Position – select the position for the subheader display. It can be Above Header or Under Header.
  • Description – the toggle to enable/disable the display of the description text.
  • Alignment – manage the description text alignment (left, center, right) for desktop, tablet or mobile.
  • Textarea field – enter the description text of the current block.
  • HTML tag – select one of the available tags from the list for the description text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
  • Justify Content – specify how to display the caption text on the map box. The available positions are Start, Center, End, Space Around, Space Between, Space Evenly.

Style tab

On the Walker widget styles tab, you can configure everything related to the visual style of elements: colors, height/width, backgrounds, borders, and more.

Street View

  • Margin – the setting allows managing the margin of the view box in different units(px, em, %) for desktop, tablets, or phones.
  • Width – specify the street view box width in different units(px, %, vw) for desktop, tablets or phones.
  • Height – specify the street view box height in different units(px, %, vh) for desktop, tablets or phones.
  • Alignment – manage box alignment (left, center, right) for desktop, tablet, or mobile.
  • CSS Filters – the option allows you to add various CSS filters for the street view as Blur, Brightness, Contrast, Saturation, Hue.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow –  this setting creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Map

  • Margin – the setting allows managing the margin of the map box in different units(px, em, %) for desktop, tablets, or phones.
  • Width – specify the map box width in different units(px, %, vw) for desktop, tablets or phones.
  • Height – specify the map box height in different units(px, %, vh) for desktop, tablets or phones.
  • Alignment – manage box alignment (left, center, right) for desktop, tablet, or mobile.
  • CSS Filters – the option allows you to add various CSS filters for the map as Blur, Brightness, Contrast, Saturation, Hue.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow –  this setting creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Overlay

  • Background Type – this setting changes the background of the current overlay. You can choose a color, gradient, or background image.
Background Type settings of Walker widget
  • Blend Mode – defines the blending mode of the first color on the second color. Select one of the 15 available modes.
  • Border Radius – the option allows you to adjust the border radius of the current block.

Header

  • Margin – the setting allows managing the margin of the header in different units(px, em, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the header in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.

Subheader

  • Margin – the setting allows managing the margin of the subheader in different units(px, em, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the subheader in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.

Description

  • Margin – the setting allows managing the margin of the description in different units(px, em, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the description in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.

Advanced Tab

The settings in the advanced tab Walker widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.