Ikhtisar Chapter 12: Campus Post Type & Google Map

Apa yang Dipelajari?

Cara membuat CPT Campus dengan Google Map interaktif — pengunjung bisa melihat pin lokasi setiap kampus di peta, klik untuk info, dan melihat relasi campus ↔ program.

Poin Utama

1. CPT Campus

Didaftarkan seperti CPT lain di mu-plugins:

php

register_post_type('campus', array(
    'show_in_rest' => true,
    'supports'     => array('title', 'editor', 'excerpt'),
    'has_archive'  => true,
    'rewrite'      => array('slug' => 'campuses'),
    'menu_icon'    => 'dashicons-location-alt',
    ...
));

2. Google Map dengan ACF

Field Google Map di ACF → menyimpan alamat, latitude, longitude
Perlu setup Google Maps API key di Google Cloud Console (aktifkan Maps JavaScript API, Places API, Geocoding API)
API key dipasang di functions.php lewat filter acf/fields/google_map/api

Data dari field:

php

$mapLocation = get_field('map_location');
$mapLocation['lat']      // latitude
$mapLocation['lng']      // longitude
$mapLocation['address']  // alamat lengkap

3. Menampilkan Peta

Di archive & single campus, gunakan div .acf-map + div .marker dengan data attributes:

html

<div class="acf-map">
  <div class="marker" data-lat="..." data-lng="...">
    <h3>Nama Campus</h3>
    Alamat
  </div>
</div>

JavaScript (module GoogleMap.js) membaca data attributes dan render pin di peta.

4. Relasi Campus ↔ Program

Arah	Metode
Program → Campus	ACF field `related_campus` di Program → `get_field()` + foreach
Campus → Program	`WP_Query` + `meta_query LIKE` (reverse lookup)

Satu Kalimat

Chapter ini menambahkan Campus sebagai Custom Post Type dengan Google Map interaktif dan relasi dua arah ke Programs, sehingga pengunjung bisa melihat lokasi kampus dan program apa saja yang tersedia di sana.

Ikhtisar Chapter 12: Campus Post Type & Google Map ​

Apa yang Dipelajari? ​

Poin Utama ​

1. CPT Campus ​

2. Google Map dengan ACF ​

3. Menampilkan Peta ​

4. Relasi Campus ↔ Program ​

Satu Kalimat ​