> For the complete documentation index, see [llms.txt](https://saba-framework.gitbook.io/saba-framework-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://saba-framework.gitbook.io/saba-framework-documentation/examples/map/markers.md).

# Markers

<figure><img src="/files/37IjYtNYaUSU30PjCM4x" alt=""><figcaption></figcaption></figure>

Sebagai contoh kita mengambil data dari api <https://api-sekolah-indonesia.vercel.app/sekolah/sma?page=1&perPage=500&kab_kota=021000>, yang jika kita eksekusi akan menghasilkan respon json dari server seperti ini:&#x20;

<figure><img src="/files/qfzsCHHl55n07VVNhnLi" alt=""><figcaption></figcaption></figure>

terlihat dari respon tersebut baris data array yang akan kita ambil berada pada kunci **dataSekolah** dan dalam setiap barisnya terdapat kunci utama untuk menampilkan marker yaitu **lintang** & **bujur**.

Maka konfigurasi pada page attributes json kita seperti ini:&#x20;

<pre class="language-json"><code class="lang-json">{
  "pageType": "crud",
  "pageTitle": "Daftar Sekolah",
  "pageDesc": "Daftar Sekolah di Provinsi Jawa Barat",
  "pageModuleTitle": "Sample",
  "crudOpt": {
    "endpointName": "https://api-sekolah-indonesia.vercel.app/sekolah?page=1&#x26;perPage=500",
    "resp_key": "<a data-footnote-ref href="#user-content-fn-1">dataSekolah</a>",
    "gridTheme": "<a data-footnote-ref href="#user-content-fn-2">map</a>",
    "map_marker_fieldName": [
      "<a data-footnote-ref href="#user-content-fn-3">lintang</a>",
      "<a data-footnote-ref href="#user-content-fn-4">bujur</a>"
    ],
    "map_marker_icon_path": "https://cdn-icons-png.flaticon.com/512/13167/13167002.png",
    "map_display_table": true,
    "map_display_table_position": "right",
    "map_display_table_first_load": false,
    "mapOtions": {
      "zoom": 13,
      "scrollWheelZoom": true,
      "fullscreenControl": true,
      "geoSearch": true
    },
    ...... opsional
    "map_draw_opt": {
      "polyline": true,
      "marker": true
    },
    ....... attribute lainnya
    "getApiSummaryData": false,
    "serverSideGrid": false,
    "detailPage": true,
    "hideTableSearchInput": false,
    "hideTablePageLengthInfo": true,
    "hideTablePagination": false,
    "detailPageModalSize": "xl",
    .......
</code></pre>

Penjelasan Property untuk type Map ada di halaman [Map](/saba-framework-documentation/examples/map.md)

[^1]: kunci array yang diambil dari respon server

[^2]: type ini wajib ditulis

[^3]: kunci pada setiap baris yang akan digunakan untuk menampilkan marker (latitude).

[^4]: kunci pada setiap baris yang akan digunakan untuk menampilkan marker (longitude).