The Google Maps component is a Silva.JS showcase component that demonstrates and tests key component functionality, such as loading, instantiation, lifecycle events and dynamic rendering.
The below demo places 4 instances of a GoogleMap component inside a ratio grid that will maintain its aspect ratio upon resize. Each component has its own scope and responds to resize, breakpoint and orientation changes.
A Google Map component can be auto loaded and initialized by simply placing the correct markup in DOM:
| Param | Description |
|---|---|
| data-component | Indicates that this is a silva-component. |
| data-component-init | Auto initialize this component instance |
| data-module | Code module corresponding to this component |
| data-lat | Latitude of position to center map on |
| data-lng | Longitude of position to center map on |
| data-zoom | Initial zoom level of map |
| id | Unique instance id |
The lat, lng and zoom attributes are observed, meaning, if you change them in the DOM, the component instance will respond to this new state.
A component can be lazily instantiated upon scrolling into view, simply by using the attribute data-component-watch instead of data-component-init. The watch toggle allows any component, including components that are not lazily loaded, to listen to the inviewport and outviewport events.
Auto-initialized components can be accessed as instances, and then interacted with. The below code gets a handle to a specific map instance, and changes the zoom level of the map:
| Param | Description |
|---|---|
| Map.lat | Latitude of position to center map on |
| Map.lng | Longitude of position to center map on |
| Map.zoom | Zoom level of map |
Components can be client-rendered by inserting the correct markup in the DOM and then instantiating a component: