How to Add Google Map with Latitude and Longitude Data Configuration in Bold BI?
Integrating Google Maps into applications can enhance the user experience by providing geographical context and interactive map features. This article outlines the steps to add a Google Map control with latitude and longitude data configuration using a custom widget.
Step-by-Step Guide to Add Google Map Control
Step 1: Obtain the Custom Widget: Download the Google Map with Latitude and Longitude the custom widget from the appropriate source. Ensure that you have the correct version that is compatible with your application.
Step 2: Generate Google Maps API Key: To use Google Maps services, you need an API key. Generate your Google Maps API key by following the instructions provided in the Google Maps API documentation.
Step 3: Configure the Widget: After obtaining your API key, extract the downloaded custom widget files. Locate the widgetconfig.json file and open it. Replace the placeholder text with your API key in the highlighted section and save the file.
Configuration File API Key Location: Ensure that the API key is correctly placed within the configuration file to avoid any issues with the map functionality.
Step 4: Pack the Custom Widget: With the API key in place, pack the custom widget using the instructions provided in the help documentation. This process prepares the widget for deployment.
Step 5: Publish the Custom Widget: Publish the packed custom widget to the Bold BI application. Detailed instructions on how to do this can be found in the Bold BI documentation.
Step 6: Add the Widget to the Designer Panel: After publishing, the Google Map with Streetview custom widget will be available under the Miscellaneous section of the designer panel. You can identify it by its unique icon or name.
Google Map with Streetview Custom Widget in Item Panel: Locate the widget in the item panel to proceed with the next steps.
Step 7: Configure Data and Display: Drag and drop the widget onto your application’s design surface. Configure the data by specifying the latitude and longitude values. The Google Map with Streetview custom widget will render on the screen.
Important Points to Consider
- Adjust the marker type between ‘Marker’ or ‘Bubble’ using the ‘Type’ option in the Basic properties.
- Customize the bubble size according to your requirements.
Key Features:
- Enable Default Focus: When this option is selected, the map will use the calculated maximum or average latitude and longitude values as the focus.
- Customization: Users can uncheck the “Enable Default Focus” option and manually set the center position using the remaining properties to meet their specific needs.
Conditional Marker Settings
Another significant enhancement is the support for marker conditional settings. This feature allows users to define conditions that will determine how markers are displayed on the map.
How to Add Conditions:
- Drag and drop the desired column into the widget.
- Navigate to the properties section to access the conditional settings.
- Customize the markers by:
- Naming the condition.
- Specifying the column name and value for filtering.
- Selecting the condition type.
Customization Options:
- Marker Appearance: Users can modify the marker’s shape, color, and size to differentiate between various conditions.
- Multiple Conditions: Up to five different conditions can be added to the widget, allowing for a comprehensive and informative map display.
By following these steps, you can successfully integrate a Google Map control with latitude and longitude data into your application, providing a rich and interactive map experience for your users.
Additional References
