Knowledge Base for DX 7 : Show Google Map in a Form

Add a text field in a Form, call it as "marker".

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>

A button will be shown.
Enter a value such as a name of a place or a coordinate into the textfield and click the button.
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

Knowledge Base for DX 7 : Show Google Map in a Form

Attachments: