Maps example - JS API Interactive search

Template code

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

<form style="margin-bottom: 10px;">
<input name="address" style="border: 1px solid green;"/>
<input type="submit">
</form>


&#123;exp:reinos_maps:html_header&#125;
&#123;exp:reinos_maps:map
  center:address="heerde"
  width="100%"
&#125;
&#123;exp:reinos_maps:html_footer&#125;

<script>
$(function()&#123;
  $("form").submit(function()&#123;
    //geocode address
    REINOS_MAPS.api("geocode", &#123;
      address : $("input[name="address"]").val(),
      callback : function(result, type)&#123;

        //remove old markers
        REINOS_MAPS.api("removeMarkers", &#123;
          mapID : "reinos_map_1"
        &#125;);

        //add marker
        REINOS_MAPS.api("addMarker", &#123;
          mapID : "reinos_map_1",
          lat: result.objects[0].latitude,
          lng: result.objects[0].longitude,
          title: result.objects[0].city
        &#125;);

        //Fit the map
        REINOS_MAPS.api("fitMap", &#123;
          mapID : "reinos_map_1"
        &#125;);
        REINOS_MAPS.api("setZoom", &#123;
          mapID : "reinos_map_1" ,
          zoom : 6
        &#125;);
      &#125;
    &#125;);
    return false;
  &#125;);
&#125;);

</script>