A Google Map element that allows you to display a given location.
PROPERTIES
FUNCTIONS
Adds an event handler that runs when the mouse pointer is moved onto the element.
Adds an event handler that runs when the mouse pointer is moved off of the element.
Adds an event handler that runs when an element is displayed in the viewable part of the current window.
Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.
Hides the element and sets its hidden property
to true, using an effect if specified.
Shows the element and sets its hidden property
to false, using an effect if specified.
Getting Started
Videos
Examples
Forumcollapsed property to true.collapsed property to false.OBJECTS
An object used by the location property that
contains the attributes of a marked map location.
Setting the location property to a MapLocation
object moves the map's marked location.
Getting the location property returns the location
information of the map's marked location.
get location(): MapLocation
set location(value: MapLocation): voidlet myLocation = $w("#myGoogleMap").location;
let locationLatitude = myLocation.latitude; // 37.77065
let locationLongitude = myLocation.longitude; // -122.387301
let locationDescription = myLocation.description; // "Wix Office"$w("#myGoogleMap").location = {
"latitude": 37.77065,
"longitude": -122.387301,
"description":"Wix Office"
};If rendered is true, the element is in the current DOM structure and
can be used.
If rendered is false the element is not in the current DOM structure.
An element might not be in the DOM if it is in a slide which is not currently showing.
get rendered(): boolean
let isRendered = $w("#myElement").rendered; // trueIf global is true, the element appears on all pages.
If global is false, the element only appears on the current page.
get global(): boolean
let isGlobal = $w("#myElement").global; // falseThe ID is the element's unique identifier. It is used when selecting
elements using the $w() function.
An element's id is set in the Editor using the Properties panel.
get id(): string
let myId = $w("#myElement").id; // "myElement"get parent(): Node
let parentElement = $w("#myElement").parent;
let parentId = parentElement.id; // "page1"let myType = $w("#myElement").type; // "$w.Type"If hidden is true, the element is not displayed on the page under
any circumstances. A hidden element, unlike a
collapsed element, continues to
take up the same space on the page as it did when it was visible.
If hidden is false, the element may be displayed on the page.
However, an element whose hidden property is false is still not
displayed if:
Even if the element is not displayed due to the conditions
mentioned above, if its hidden property is set to false, it's
displayed when the conditions no longer apply.
To determine if the element is actually visible, use the
isVisible property.
To set the hidden property on an element, use the element's
hide() or show() functions.
If you select Hidden on load in the element's Properties panel
in the Editor, the hidden property is set to true when the page loads.
An element's hidden property is not the same as its
isVisible property. The hidden property
indicates whether the element should be displayed, while isVisible
indicates if it is actually displayed.
hide( ), show( ), collapse( ), expand( ), collapsed, rendered
get hidden(): boolean
let isHidden = $w("#myElement").hidden; // falseif( $w("#myElement").hidden ) {
$w("#myElement").show();
}
else {
$w("#myElement").hide();
}If isVisible is true, the element is displayed on the page.
If isVisible is false, the element is not displayed on the page.
The value of the isVisible property is calculated based on the
hidden, collapsed, and rendered
properties of the element and all of its ancestors. It is true
only if the conditions exist in the element's property values and the
property values of its ancestors such that the element is actually
displayed on the page.
An element's isVisible property is not the same as its
hidden property. The isVisible property
indicates whether the element is actually displayed, while hidden
indicates if it should be displayed.
The isVisible property of an element remains true even if
another element completely covers it so that a user cannot see it.
get isVisible(): boolean
let isVisible = $w("#myElement").isVisible; // trueIf collapsed is true, the element is not displayed on the page under
any circumstances. A collapsed element, unlike a
hidden element, does not take up any
space on the page. When collapsed, elements positioned within 70 pixels
below the collapsed element and each other move up to take the
collapsed element's place where possible. The elements that move up
maintain their positions relative to one another.
If collapsed is false, the element may be displayed on the page.
Elements that moved up to take the collapsed element's place on the
page are moved back down.
However, an expanded element (an element whose collapsed property is
false) is still not displayed if:
Even if the element is not be displayed due to the conditions
mentioned above, if its collapsed property is false, it's
displayed when the conditions no longer apply.
To set the collapsed property on an element, use the element's
collapse() and expand() functions.
If you select Collapsed on load in the element's Properties panel
in the Editor, the collapsed property is set to true when the page loads.
get collapsed(): boolean
let isCollapsed = $w("#myElement").collapsed; // falseif( $w("#myElement").collapsed ) {
$w("#myElement").expand();
}
else {
$w("#myElement").collapse();
}Adds an event handler that runs when the mouse pointer is moved onto the element.
Deprecation note: The $w parameter of event handlers is being deprecated. To get
a scoped selector for working with elements in repeater items, use the $w.at() function
and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see
here.
function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): voidThe name of the function or the function expression to run when the mouse pointer is moved onto the element.
$w("#myElement").onMouseIn( (event) => {
let clientX = event.clientX; // 362
let clientY = event.clientY; // 244
let offsetX = event.offsetX; // 10
let offsetY = event.offsetY; // 12
let pageX = event.pageX; // 362
let pageY = event.pageY; // 376
let screenX = event.screenX; // 3897
let screenY = event.screenY; // 362
} );Adds an event handler that runs when the mouse pointer is moved off of the element.
Deprecation note: The $w parameter of event handlers is being deprecated. To get
a scoped selector for working with elements in repeater items, use the $w.at() function
and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see
here.
function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): voidThe name of the function or the function expression to run when the mouse pointer is moved off of the element.
$w("#myElement").onMouseOut( (event) => {
let clientX = event.clientX; // 362
let clientY = event.clientY; // 244
let offsetX = event.offsetX; // 10
let offsetY = event.offsetY; // 12
let pageX = event.pageX; // 362
let pageY = event.pageY; // 376
let screenX = event.screenX; // 3897
let screenY = event.screenY; // 362
} );The scrollTo() function returns a Promise that is resolved when the
animated scroll is complete and the element is now in view.
To scroll to a specific location on the page, see the wix-window
scrollTo() function.
Calling the scrollTo() function on an element in a repeated item that
is selected from the global scope causes
an error.
function scrollTo(): Promise<void>$w("#myElement").scrollTo();$w("#myElement").scrollTo()
.then( ( ) => {
console.log("Done with scroll");
} );Adds an event handler that runs when an element is displayed in the viewable part of the current window.
An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window.
Deprecation note: The $w parameter of event handlers is being deprecated. To get
a scoped selector for working with elements in repeater items, use the $w.at() function
and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see
here.
function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): voidThe name of the function or the function expression to run when the element enters the viewport.
$w("#myElement").onViewportEnter( (event) => {
let targetId = event.target.id; // "myElement"
});Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.
An element leaves the viewport when the page is scrolled so that the elements is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window.
Deprecation note: The $w parameter of event handlers is being deprecated. To get
a scoped selector for working with elements in repeater items, use the $w.at() function
and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see
here.
function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): voidThe name of the function or the function expression to run when the element leaves the viewport.
$w("#myElement").onViewportLeave( (event) => {
let targetId = event.target.id; // "myElement"
});Hides the element and sets its hidden property
to true, using an effect if specified.
The hide() function hides the element and returns a Promise that is
resolved when the effect is complete and the element's hidden
property has been set to true.
To learn about the behavior of a hidden element,
see the hidden property.
You can optionally apply an effect when hiding the element by providing
an effectName value. You can also customize the effect by providing the
optional effectOptions object.
Effects:
You can also hide an element when the page loads by using the Properties panel in the Editor.
function hide([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>The name of the effect to play when hiding the item.
hidden property has been set to true.$w("#myElement").hide();$w("#myElement").hide("fade");let fadeOptions = {
"duration": 2000,
"delay": 1000
};
$w("#myElement").hide("fade", fadeOptions);$w("#myElement").hide("fade")
.then( ( ) => {
console.log("Done with fade");
} );if( $w("#myElement").hidden ) {
$w("#myElement").show();
}
else {
$w("#myElement").hide();
}Shows the element and sets its hidden property
to false, using an effect if specified.
The show() function shows the element and returns a Promise that is
resolved when the effect is complete and the element's hidden
property has been set to false.
You can optionally apply an effect when showing the element by providing
an effectName value. You can also customize the effect by providing the
optional effectOptions object.
Effects:
function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>The name of the effect to play when showing the item.
hidden property has been set to false.$w("#myElement").show();$w("#myElement").show("fade");let fadeOptions = {
"duration": 2000,
"delay": 1000
};
$w("#myElement").show("fade", fadeOptions);$w("#myElement").show("fade")
.then( ( ) => {
console.log("Done with fade");
} );if( $w("#myElement").hidden ) {
$w("#myElement").show();
}
else {
$w("#myElement").hide();
}collapsed property to true.function collapse(): Promise<void>collapsed property has been set to true.$w("#myElement").collapse();$w("#myElement").collapse()
.then( () => {
console.log("Done with collapse");
} );if( $w("#myElement").collapsed ) {
$w("#myElement").expand();
}
else {
$w("#myElement").collapse();
}collapsed property to false.function expand(): Promise<void>collapsed property has been set to false.$w("#myElement").expand();$w("#myElement").expand()
.then( () => {
console.log("Done with expand");
} );if( $w("#myElement").collapsed ) {
$w("#myElement").expand();
}
else {
$w("#myElement").collapse();
}An object used by the location property that
contains the attributes of a marked map location.
type MapLocation = {
latitude: number
longitude: number
description: string
}let myLocation = $w("#myGoogleMap").location;
let locationLatitude = myLocation.latitude; // 37.77065
let locationLongitude = myLocation.longitude; // -122.387301
let locationDescription = myLocation.description; // "Wix Office"