From Xojo Documentation

Class (inherits from WebUIControl)

New in 2020r1

A control for viewing maps loaded via a map provider like Google. It is initially centered at the position specified by Latitude, Longitude.

Closed Hidden Shown
ContextualMenuSelected Opening
APIKey LockHorizontal fa-lock-32.png Parent fa-lock-32.png
AllowFullScreen LockLeft fa-lock-32.png Style
ContextualMenu LockRight fa-lock-32.png TabIndex
ControlID fa-lock-32.png LockVertical fa-lock-32.png Tooltip
Enabled Longitude Top
Height MapType Visible
Indicator Mode Width
Latitude ModeData Zoom
Left Name fa-lock-32.png
LockBottom fa-lock-32.png Page fa-lock-32.png
AddLocation GoToLocation Search
Close GotoURL SetFocus
ExecuteJavaScript RemoveLocation UpdateBrowser
MapTypes Modes


As of June 2018, Google Maps requires an API Key. You will need to set the APIKey property to your API Key in order for WebMapViewer to display any maps.

The WebMapViewer control is based on Google maps. As such, has the same strengths and limitations of Google Maps.

If errors occur during initialization of the WebMapViewer and you are running in debug mode, the error messages will appear in the IDE Messages pane.

Google Maps API Key

As of June 2018, Google Maps requires an API Key. Visit the Google Maps docs for more information on usage:

Google Maps Platform User Guide

The MapViewer User Interface

When you add a WebMapViewer control to a WebPage, it comes with widgets to manipulate the zoom, the type, and the location. The zoom level is adjusted via the Slider control on the left and you can change the location by dragging with the hand (top-left). The type of map is changed by clicking the segmented control on the top-right corner. When you change the type (for example, from Map to Satellite), a check box appears below the Segmented Control to toggle that view type. If Map is selected, a Terrain checkbox appears to show or hide terrain features; if Satellite is selected, a checkbox appears to show or hide labels.

Sample Code

Create and display a location on the map:

Var location As New WebMapLocation("Fenway Park, Boston, MA")

Display a location entered by the user (in the LocationField TextField) on the map:


See Also

WebMapLocation class.