Maps example - Manually show/hide markers

Template code

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>

<p>
<input checked class="checkbox" type="checkbox" value="amsterdam"/> <strong>Amsterdam</strong>
<input checked class="checkbox" type="checkbox" value="rotterdam"/>  <strong>Rotterdam</strong>
<input checked class="checkbox" type="checkbox" value="den-haag"/> <strong>Den-Haag</strong>
</p>

&#123;exp:reinos_maps:html_header&#125;
&#123;exp:reinos_maps:map
    width="100%"
    fit_map:markers="yes"
&#125;
   &#123;maps:add_marker
            address="amsterdam"
            keys="amsterdam"
    &#125;
    &#123;maps:add_marker
        address="rotterdam"
        keys="rotterdam"
    &#125;
    &#123;maps:add_marker
        address="den-haag"
        keys="den-haag"
    &#125;
&#123;/exp:reinos_maps:map&#125;
&#123;exp:reinos_maps:html_footer&#125;

<script>
$(function()&#123;
    $(".checkbox").click(function()&#123;

        //show marker
        if($(this).is(":checked")) &#123;
            REINOS_MAPS.api("showMarker", &#123;
                mapID : "reinos_map_1",
                key : $(this).val()
            &#125;);
        //hide
        &#125; else &#123;
             REINOS_MAPS.api("hideMarker", &#123;
                mapID : "reinos_map_1",
                key : $(this).val()
            &#125;);
        &#125;
    &#125;);
&#125;);
</script>