Home / Widgets

Map Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The Map widget is a tool that showcases geographic maps and location-based data, empowering users to engage with the map through zooming and other interactive features. This enriches the user experience and presents essential location-related details in a visually pleasing manner. Use the widget for websites in various industries, including travel, real estate, etc., or add it to your website to indicate delivery service locations or event venues.

Adding a Map Widget

To add a Map widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the required page.
  3. Go to the Widgets list on the Visual Editor Left Panel.

  4. Type the widget name in the search bar, or expand the Advanced group to access the Map widget.

  5. Drag and drop the Map widget onto the required area of the Layout Canvas.

Upon placement the widget appears with the default size and styling, which you can customize.

Configuring the Map Widget

To design the appearance and behavior of the Map widget, activate the Property Panel of the widget by clicking it to access the widget Styles, Content, and Settings.

  1. Go to the widget Styles to configure its general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
    • Customize the widget-specific feature General, specifically:
      • Choose the Map Type (Hybrid, Roadmap, Satellite, and Terrain) according to the specific information or visualization needed for your website.
      • Select the Map Style (Default, Aubergine, Dark, Night, Retro, and Silver) for the required visual representations of the geographic map.
      • Set the required Zoom Level with higher numbers indicating a closer and more detailed view, and lower numbers for a broader and more encompassing view.

      • Activate the Google Map Settings toggle to display the Pegman and +/- buttons on the map to allow your users to access Street View and zoom in (+) and out (-).

  2. Go to the widget Content to add the required locations on your map, specifically:
    • Add the Location Name, which is visible to only you for differentiating the locations, in case you have more than one.
    • Use the Address search bar to look for the specific location you want to add. You can enter the name of the place, address, or coordinates.
    • The Latitude and Longitude values are automatically filled in.

Note: You can add an unlimited number of locations.

3. Go to the widget Settings to set its visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.