Map

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.

city: String
City.

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:

HTML Template: Defines the structure and layout of the map, including optional header and image.

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:

Include the Component: Register the Map component in your Vue app.

Provide the Model: Pass a model object to configure the map's appearance and behavior.

Render the Component: Include the Map component in your template and provide the necessary data.

Documentation: Map Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#