Versions Compared

Old Version 3

changes.mady.by.user Hugo

Saved on

compared with

New Version Current

changes.mady.by.user PT

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
  1. English
    Add a text field in a Form, call it as "
    coordinate
    marker".

  2. Add a Custom HTML in a Form. Place the following code:-

    Code Block
    <button id="showMap">Show in Map</button>
<div id="mapholder"></div>

<script type="text/javascript">

$( function(){
    $("button#showMap").click( function(event){
        event.preventDefault();
        showPosition($("#coordinate#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.
    Image Added
    Reference: https://developers.google.com/maps/documentation/embed/get-started