Versions Compared

Old Version 3

changes.mady.by.user Hugo

Saved on

compared with

New Version 4

changes.mady.by.user Hugo

Saved on

Key

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

  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