Integrating Google Maps into Joget Forms

Enhance your Joget applications by embedding Google Maps directly into forms. This allows users to visualize locations by entering place names or coordinates. Follow the steps below to incorporate a map view within your Joget form.

1. Add a text field to your form. Name this field marker. This field will input location data, such as a place name or coordinates.
2. Add the following HTML into your form to create an interactive map display:
   
   
   • Place a button and a div element for the map.
   • Use the script below to fetch the map based on the user’s input.
     

     <button id="showMap">Show in Map</button>
     <div id="mapholder"></div>
     
     <script type="text/javascript">
     $(function(){
         $("button#showMap").click(function(event){
             event.preventDefault();
             showPosition($("#marker").val());
         });
     });
     
     function showPosition(position) {
         var latlon = position;
         var iframe_url = "https://www.google.com/maps/embed/v1/place?key=[YourGoogleAPIKeyHere]&q=" + latlon;
         document.getElementById("mapholder").innerHTML = "<iframe width='85%', height='500px' src='" + iframe_url + "'></iframe>";
     }
     </script>

3. Users can enter a location name or coordinates into the "marker" text field.
4. Upon clicking the Show in Map button, the map will dynamically update to show the specified location within the div container.
5. You must replace [YourGoogleAPIKeyHere] in the iframe URL with your actual Google Maps API key to ensure the map displays correctly.

   See the official Google Maps Platform documentation for further details on embedding Google Maps.

This integration enhances the interactivity of your forms and adds a visual dimension that can improve user experience significantly. Following these steps, you can effectively incorporate dynamic Google Maps into your Joget applications, giving users a practical tool to visualize locations instantly.