Indonesia Map with Markers Demo

Interactive Map with Custom Markers

Marker Legend

Red MarkerRed Marker
Green MarkerGreen Marker
Blue MarkerBlue Marker
Black MarkerBlack Marker

Marker Data Structure

[
  {
    "lat": -6.2088,
    "lng": 106.8456,
    "title": "Jakarta",
    "popup": "<strong>Jakarta</strong><br/>Ibu Kota Indonesia<br/>Proyek: 3 aktif<br/>Status: Berjalan",
    "type": "red"
  },
  {
    "lat": -7.7971,
    "lng": 110.3708,
    "title": "Yogyakarta",
    "popup": "<strong>Yogyakarta</strong><br/>Daerah Istimewa<br/>Proyek: 2 aktif<br/>Status: Berjalan",
    "type": "green"
  },
  {
    "lat": -6.9175,
    "lng": 107.6191,
    "title": "Bandung",
    "popup": "<strong>Bandung</strong><br/>Kota Kembang<br/>Proyek: 1 aktif<br/>Status: Selesai",
    "type": "blue"
  },
  {
    "lat": -7.2575,
    "lng": 112.7521,
    "title": "Surabaya",
    "popup": "<strong>Surabaya</strong><br/>Kota Pahlawan<br/>Proyek: 2 aktif<br/>Status: Berjalan",
    "type": "black"
  },
  {
    "lat": -3.5952,
    "lng": 128.1669,
    "title": "Ambon",
    "popup": "<strong>Ambon</strong><br/>Maluku<br/>Proyek: 1 aktif<br/>Status: Perencanaan",
    "type": "green"
  },
  {
    "lat": 1.3521,
    "lng": 124.8503,
    "title": "Manado",
    "popup": "<strong>Manado</strong><br/>Sulawesi Utara<br/>Proyek: 1 aktif<br/>Status: Berjalan",
    "type": "blue"
  },
  {
    "lat": -5.1477,
    "lng": 119.4327,
    "title": "Makassar",
    "popup": "<strong>Makassar</strong><br/>Sulawesi Selatan<br/>Proyek: 3 aktif<br/>Status: Berjalan",
    "type": "red"
  },
  {
    "lat": -0.5021,
    "lng": 117.1536,
    "title": "Samarinda",
    "popup": "<strong>Samarinda</strong><br/>Kalimantan Timur<br/>Proyek: 2 aktif<br/>Status: Berjalan",
    "type": "green"
  }
]

How to Use

Component Usage:

<IndonesiaMap 
  mapId="your-map-id" 
  :markers="yourMarkersArray" 
/>

Marker Data Format:

{
  lat: number,           // Latitude
  lng: number,           // Longitude
  title: string,         // Marker title
  popup: string,         // HTML content for popup
  type: 'red' | 'green' | 'blue' | 'black'  // Marker type
}