Maps example - JS API general

Template code

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

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

<script>
$(function()&#123;
  REINOS_MAPS.api("geocode", &#123;
    address : "heerde|apeldoorn|amsterdam",
    callback : function(result, type)&#123;
      $.each(result.objects, function(k,v)&#123;
        REINOS_MAPS.api("addMarker", &#123;
          mapID : "reinos_map_1",
          lat: v.lat,
          lng: v.lng,
          title: v.city
        &#125;);

        REINOS_MAPS.api("addCircle", &#123;
          mapID : "reinos_map_1",
          lat: v.lat,
          lng: v.lng,
          fillColor : "#BBD8E9",
          fillOpacity : 0.3,
          radius : 7000,
          strokeColor : "#BBD8E9",
          strokeOpacity : 0.9,
          strokeWeight : 2,
          zIndex : 1
        &#125;);
      &#125;);

      REINOS_MAPS.api("geocode", &#123;
        address : "utrecht|hardewijk gelderland",
        callback : function(result, type)&#123;
          REINOS_MAPS.triggerEvent("addRectangle", &#123;
            mapID : "reinos_map_1",
            bounds : [[result.objects[0].latitude,result.objects[0].longitude],[result.objects[1].latitude,result.objects[1].longitude]],
            fillColor : "#BBD8E9",
            fillOpacity : 0.3,
            strokeColor : "#BBD8E9",
            strokeOpacity : 0.8,
            strokeWeight : 2,
            zIndex : 1
          &#125;);
        &#125;
      &#125;);

      REINOS_MAPS.api("fitMap", &#123;
        mapID : "reinos_map_1"
      &#125;);
    &#125;
  &#125;);
&#125;);
</script>