How to Customize the Map Design Element

This article will demonstrate how to customize the Map Design Element and expound on its modifiable features.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the Map Design Element
  • Step 3: Add content
  • Step 4: Customize the Map’s Design
  • Step 5: Save
• Map Features
  • A. Content tab
  • B. Design tab
  • C. Custom CSS Tab

Prerequisite

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Map Design Element:

NOTECheck out Map Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Map Design Element:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Insert the Map Design Element

• Click the plus icon.
• Use the search box to look for Map and click it.

Step 3: Add content

• Modify the Latitude.
• Modify the Longitude.

NOTETo get the Latitude and Longitude in Google Maps, simply right-click on the specific location you want to display and select the values. This will automatically copy the coordinates. The Latitude coordinate will always be written first, followed by the Longitude.

Step 4: Customize the Map’s Design

• Navigate to the Design tab.
• Customize the Map’s design according to your preferences.
• Click the green check mark once you are satisfied.

NOTECheck out Map Features to learn more about the OOTB options you can customize.

Step 5: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Map Features

Below are the options you can find in the Map Settings window:

A. Content tab

The Content tab allows you to plot the Latitude and Longitude of the specific location you want to feature on the Map.

B. Design tab

The Design tab allows you to customize the design of the Map Design Element. It has the following options:

	Color	allows you to modify the color of the map.
	Width	allows you to adjust the width of the map.
	Height	allows you to adjust the height of the map.
	Zoom	allows you to customize how zoomed in you want your Map to be.
	Marker	when enabled, this will add a marker to your map.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Well Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTEThe Visibility tab is currently unavailable in Live Mode.

That’s it! You now know how to customize the Well Design Element. 

Related articles:

• How to Customize the Textshow Design Element
• How to Customize the Image Titles Design Element
• How to Customize the Info Design Element
• How to Customize the Counter Boxes Design Element