Joget DX Available for Download

Check out Joget DX, the next generation successor to Joget Workflow for faster, simpler digital transformation.

Skip to end of metadata
Go to start of metadata
  1. Add a text field in a Form, call it as "marker".
  2. Add a Custom HTML in a Form. Place the following code:-

    <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+"'>";
    }
    </script>
  3. A button will be shown.
  4. Enter a value such as a name of a place or a coordinate into the textfield and click the button.
  5. On the click of the button, it will retrieve the value from the text field earlier and display the map.

    Reference: https://developers.google.com/maps/documentation/embed/get-started
  • No labels