You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

  1. Add a text field in a Form, call it as "coordinate"
  2. Add a Custom HTML in a Form. Place the following code:-

    <button id="showMap">Show in Map</button>
    <div id="mapholder"></div>
    
    <script>
    
    $( function(){
        $("button#showMap").click( function(event){
            event.preventDefault();
            showPosition($("#coordinate").val());
        });
    });
    
    function showPosition(position) {
        var latlon = position;
        
        var iframe_url = "https://www.google.com/maps/embed/v1/place?q=" + latlon;
        document.getElementById("mapholder").innerHTML = "<iframe width='85%', height='500px' src='"+iframe_url+"'>";
    }
    </script>
  3. A button will be shown. On the click of the button, it will retrieve the value from the text field earlier and display the map.
  • No labels