Documentation: Map Component#
The Map Component provides an embedded map view using Google Maps. It allows displaying a location based on address or coordinates. This component includes customizable options such as map zoom level and alignment for the header.Overview#
The Map Component integrates Google Maps into your application, allowing users to view a specific location. It can be configured to display a map based on an address or geographical coordinates. The component's template includes a header, optional image, and an embedded map iframe.Model Documentation#
The model
object for the Map Component contains configuration options that define how the map should be displayed and customized.Model Structure#
id: String
A unique identifier for the component. Used for element targeting and CSS styling.
cssClass: String
Optional CSS class(es) to apply to the component's container.
header: String
Optional header text to display at the top of the map component.
address: Object
Contains address details, including:address1: String
Street address.
postalCode: String
Postal code.
latitude: Number
Latitude for location coordinates.
longitude: Number
Longitude for location coordinates.
zoom: Number
Zoom level for the map view.
Example Model#
{
"id": "mapComponent",
"cssClass": "custom-map-class",
"header": "Our Location",
"address": {
"address1": "1600 Amphitheatre Parkway",
"city": "Mountain View",
"postalCode": "94043"
},
"latitude": 37.422,
"longitude": -122.084,
"zoom": 14
}
Component Structure#
The Map Component consists of:1.
HTML Template: Defines the structure and layout of the map, including optional header and image.
2.
JavaScript: Manages map URL generation, alignment, and reactive data.
HTML Template#
The HTML template provides the layout for the map component. It includes an optional header, an image, and an embedded iframe for displaying the map.JavaScript#
The JavaScript code handles the dynamic generation of the map URL and provides methods for alignment and configuration.Explanation#
Map URL Generation: The GetMapUrl
method constructs the Google Maps URL based on provided address or coordinates and zoom level. It uses Google Maps' Embed API to generate the map iframe source URL.
Dynamic Data Handling: Data such as the address, latitude, longitude, and zoom level are reactive, allowing the component to update the map view based on these values.
Alignment Class: The getAlignmentClass
method applies CSS classes to align the header based on the alignment value provided in the model.
Usage#
To use the Map Component in your Vue.js application:1.
Include the Component: Register the Map
component in your Vue app.
2.
Provide the Model: Pass a model object to configure the map's appearance and behavior.
3.
Render the Component: Include the Map
component in your template and provide the necessary data.
Modified at 2024-08-27 09:55:13