# Markers

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2F1is69uSPirBaGTj4Mr6z%2Fimage.png?alt=media&#x26;token=5731dba2-d461-44fc-8010-6a0295dd955c" 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="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FtQuI8KdkeM7rqWoUljE0%2Fimage.png?alt=media&#x26;token=399d2671-b716-4d52-a9be-581c9199266d" 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 [](https://saba-framework.gitbook.io/saba-framework-documentation/examples/map "mention")

[^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).