{"id":2758,"date":"2024-01-18T11:59:10","date_gmt":"2024-01-18T04:59:10","guid":{"rendered":"http:\/\/cpanel.jblstore.co.id\/?page_id=2758"},"modified":"2024-07-09T15:02:19","modified_gmt":"2024-07-09T08:02:19","slug":"car-audio","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/car-audio\/","title":{"rendered":"Car Audio Location"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2758\" class=\"elementor elementor-2758\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-313781b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"313781b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f91c078\" data-id=\"f91c078\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bad05ce elementor-widget elementor-widget-shortcode\" data-id=\"bad05ce\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <style>\n        \/* replace *\/\n        .row {\n            margin-left: -16px;\n            margin-right: -16px;\n            margin-bottom: 100px;\n        }\n        .col-lg-6,\n        .col-12 {\n            padding-left: 16px;\n            padding-right: 16px;\n        }\n        \/* end replace *\/\n        \n        .my-map-h1 {\n            font-family: \"Kostic - Roc Grotesk Regular\";\n        }\n        @media (min-width: 768px) {\n            .my-map-row {\n                height: 500px;\n            }\n        }\n        @media (max-width: 767px) {\n            .my-map-row {\n                flex-direction: column-reverse;\n            }\n        }\n        .my-map-list-container {\n            display: flex;\n            flex-direction: column;\n            height: calc(100%);\n        }\n        @media (max-width: 767px) {\n            .my-map-list-container {\n                padding-top: 20px;\n            }\n        }\n        .my-map-search-input {\n            width: 100%;\n            margin-bottom: 20px;\n            font-family: \"Kostic - Roc Grotesk Regular\";\n        }\n        .list-map-items-wrapper {\n            overflow-y: auto;\n            height: 100%;\n        }\n        @media (max-width: 767px) {\n            .list-map-items-wrapper {\n                height: 400px;\n            }\n        }\n        .my-map {\n            height: 100%;\n        }\n        @media (max-width: 767px) {\n            .my-map {\n                height: 400px;\n            }   \n        }\n        .my-map-heading,\n        .list-map-heading {\n            margin: 7px 0 10px !important;\n            font-size: 18px;\n            font-family: \"Kostic - Roc Grotesk Regular\";\n        }\n        @media (max-width: 767px) {\n            .my-map-heading,\n            .list-map-heading {\n                font-size: 16px;\n            }\n        }\n        .list-map-heading {\n            color: #0072c0;\n        }\n        .list-map-heading:hover {\n            text-decoration: underline;\n        }\n        .my-map-body,\n        .list-map-body {\n            margin-bottom: 10px;\n            font-family: \"Kostic - Roc Grotesk Regular\";\n        }\n        @media (max-width: 767px) {\n            .my-map-body,\n            .list-map-body {\n                font-size: 12px;   \n            }\n        }\n        .my-map-body {\n            max-width: 250px;\n        }\n        .elementor-shortcode\n        {\n            max-width: 1200px;\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n        }\n        .city-filter {\n            display: block;\n            margin: 20px 0;\n            font-family: \"Kostic - Roc Grotesk Regular\";\n        }\n\n        .city-filter button {\n            background-color: #F5F5F5;\n            border-radius: 30px;\n            color: #0f0f0f;\n            padding: 5px 11px;\n            cursor: pointer;\n            \/* line-height: 10px; *\/\n            margin-bottom: 5px;\n            font-family: \"Kostic - Roc Grotesk Regular\";\n\n        }\n\n        .city-filter button.active {\n            background-color: #F04C24;\n            color: white;\n        }\n        .small-button {\n        font-size: 12px; \/* You can adjust the size as needed *\/\n    }\n    .filter-button {\n        font-size: 12px; \/* You can adjust the size as needed *\/\n    }\n    @media(min-width: 1680px)\n    {\n        .filter-button {\n        \tfont-size: 13px; \/* You can adjust the size as needed *\/\n        }\n    }\n    @media(min-width: 1920px)\n    {\n        .filter-button {\n        font-size: 14px; \/* You can adjust the size as needed *\/\n        }\n    }\n    <\/style>\n    <div>\n         \n        <h1 class=\"my-map-h1\">Car Audio Location<\/h1>\n        <!-- City Filter -->\n        \n        <div>\n            <div class=\"row my-map-row\">\n                <div class=\"col-12 col-lg-6 my-map-list-container\">\n                    <div class=\"my-map-search-wrapper\">\n                        <input class=\"my-map-search-input\" type=\"search\" placeholder=\"Filter location or location address\" value=\"\">\n                    <\/div>\n                    <div class=\"city-filter\">\n\t\t\t\t\t\t<button class=\"filter-button active small-button\" data-city=\"all\">All<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"jakarta\">Jakarta<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"bekasi\">Bekasi<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"bandung\">Bandung<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"bogor\">Bogor<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"surabaya\">Surabaya<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"semarang\">Semarang<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"makassar\">Makassar<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"medan\">Medan<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"pontianak\">Pontianak<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"batam\">Batam<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"palembang\">Palembang<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"tangerang\">Tangerang<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"yogyakarta\">Yogyakarta<\/button>\n\t\t\t\t\t\t<button class=\"filter-button small-button\" data-city=\"malang\">Malang<\/button>\n\t\t\t\t\t\t<!-- Add more buttons for other cities as needed -->\n\t\t\t\t\t<\/div>\n                    <div class=\"list-map-items-wrapper\"><\/div>\n                <\/div>\n                <div class=\"col-12 col-lg-6\">\n                    <div id=\"map\" class=\"my-map\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <script async src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyChkloQAZvXCdvOIRZTGN62tsJvss0Rb1o&callback=initMap\"><\/script>\n       \n        <script>\n            \/\/ function initMap() {\n            \/\/     const map = new google.maps.Map(document.getElementById(\"map\"), {\n            \/\/         zoom: 12,\n            \/\/         center: { lat: 34.84555, lng: -111.8035 },\n            \/\/     });\n            \/\/     \/\/ Set LatLng and title text for the markers. The first marker (Boynton Pass)\n            \/\/     \/\/ receives the initial focus when tab is pressed. Use arrow keys to\n            \/\/     \/\/ move between markers; press tab again to cycle through the map controls.\n            \/\/     const tourStops = [\n            \/\/         [{ lat: 34.8791806, lng: -111.8265049 }, \"Boynton Pass\"],\n            \/\/         [{ lat: 34.8559195, lng: -111.7988186 }, \"Airport Mesa\"],\n            \/\/         [{ lat: 34.832149, lng: -111.7695277 }, \"Chapel of the Holy Cross\"],\n            \/\/         [{ lat: 34.823736, lng: -111.8001857 }, \"Red Rock Crossing\"],\n            \/\/         [{ lat: 34.800326, lng: -111.7665047 }, \"Bell Rock\"],\n            \/\/     ];\n            \/\/     \/\/ Create an info window to share between markers.\n            \/\/     const infoWindow = new google.maps.InfoWindow();\n\n            \/\/     \/\/ Create the markers.\n            \/\/     tourStops.forEach(([position, title], i) => {\n            \/\/         const marker = new google.maps.Marker({\n            \/\/             position,\n            \/\/             map,\n            \/\/             title: `${i + 1}. ${title}`,\n            \/\/             label: `${i + 1}`,\n            \/\/             optimized: false,\n            \/\/         });\n\n            \/\/         \/\/ Add a click listener for each marker, and set up the info window.\n            \/\/         marker.addListener(\"click\", () => {\n            \/\/             infoWindow.close();\n            \/\/             infoWindow.setContent(marker.getTitle());\n            \/\/             infoWindow.open(marker.getMap(), marker);\n            \/\/         });\n            \/\/     });\n            \/\/ }\n\n            \/\/ window.initMap = initMap;\n\n            let locations = [\n               \n            {title:\"C\/A\/S\", city: \"Jakarta\", address: \"MGK lantai V blok F2 no.1, Jakarta Pusat\", phone: \"021 - 654.0282\", position: \"-6.154753199110116, 106.84899441595887\"},\n            {title:\"Citra Baru Motor\", city: \"Jakarta\", address: \"Blok M Mall Lt. Basement B\/11, Jakarta Selatan\", phone: \"021 - 727.93735\", position: \"-6.243405208483359, 106.79932889059079\"},\n            {title:\"Kota Agung\", city: \"Jakarta\",address: \"Glodok Plaza Lt. 2 Blok D 5, Jakarta Selatan\", phone: \"021 - 367 20148\", position: \"-6.142323040091044, 106.81683156310446\"},\n            {title:\"Bronson\", city: \"Jakarta\",address: \"Arteri Kedoya No. 47 (Jl. Panjang), Jakarta Barat\", phone: \"021 - 569.64608\", position: \"-6.176777233448822, 106.76644860165237\"},\n            {title:\"Elixir Car Stereo\", city: \"Jakarta\",address: \"Jl. Arjuna Selatan No. 39, Jakarta Barat\", phone: \"0813-28567172\", position: \"-6.189593111949752, 106.772070393506\"},\n            {title:\"Empire\",city: \"Jakarta\", address: \"MGK Lt. UG Blok A11 No. 1 Jlang Kasa Kav, Jakarta Utara\", phone: \"021-29135156\", position: \"-6.154737741872982, 106.84899877285847\"},\n            {title:\"Brembrem\", city: \"Bekasi\",address: \"Axc summarecon bekasi Blok VG 21 - VG 22, RT.003\/RW.002, Marga Mulya, Kec. Bekasi Utara, Kota Bks, Jawa Barat 17143\", phone: \"0817-17113000\", position: \"-6.225815715116421, 107.00251672289039\"},\n            {title:\"TOMS\",city: \"Bandung\", address: \"Jl Cikawao no.50, Bandung\", phone: \"022 - 423.3221\", position: \"-6.928426428985633, 107.61545955425223\"},\n            {title:\"Sumber Berkat Variasi\", city: \"Bandung\",address: \"Jl Terusan Jakarta  no.10D, Bandung\", phone: \"022 - 727.9561\", position: \"-6.913570365086595, 107.64615035666947\"},\n            {title:\"DINASTI Audio\", city: \"Bogor\",address: \"Jl. Darur Qur'an - Loji, Kec. Bogor Barat, Bogor\", phone: \"0877-25756144\", position: \"-6.584672684891573, 106.77178194869555\"},\n            {title:\"Gema Persada\",city: \"Bogor\", address: \"Jl. Cibalok, Ruko 11. RT.05\/RW.03, Pabaton, Kecamatan Bogor Tengah, Kota Bogor, Jawa Barat\", phone: \"0812-9889-2139\", position: \"-6.591607534700963, 106.79424047792793\"},\n            {title:\"Autocar\", city: \"Surabaya\",address: \"Ruko Galaxy Bumi Permai Blok G-6 \/ 3, Surabaya\", phone: \"031.599.3757\", position: \"-7.301570475800513, 112.78563478980954\"},\n            {title:\"Transindo\", city: \"Semarang\", address: \"Barito Jaya No. 12 A, Semarang\", phone: \"024 - 40145123\", position: \"-6.988489896861464, 110.43945404123757\"},\n            {title:\"Singaraja Car Audio\", city: \"Makassar\", address: \"Jl. Todopuli Raya Timur blok A3 no.19-20, Makassar\", phone: \"0411 - 466.3720\", position: \"-5.163337552163921, 119.45331978216818\"},\n            {title:\"FAA\",  city: \"Makassar\",address: \"Cakalang 14 Ruko BB \/ 16 (Depan Ruko), Makassar\", phone: \"0411 - 3625488\", position: \"-5.118329247839935, 119.41881231117233\"},\n            {title:\"ERA Motor\", city: \"Pontianak\", address: \"Jl. Teuku Umar no 7-9, Pontianak\", phone: \"0561 - 739.384\", position: \"-0.03038349017572514, 109.335792857085\"},\n            {title:\"Accoustic Audio\",  city: \"Palembang\",address: \"Jl. Lebak Rejo no.1 Sekip Tengah, Palembang\", phone: \"0711 - 314.485\", position: \"-2.9621126962600717, 104.75568841099236\"},\n            {title:\"Sinar Repelita\",  city: \"Medan\",address: \"Jl. Madio Santoso no 139 F, Medan\", phone: \"061 - 661.4915\", position: \"3.620627302284461, 98.6876375233135\"},\n            {title:\"Sonati\",  city: \"Medan\",address: \"Jl. Malaka no.64, Medan\", phone: \"061 - 414.7674\", position: \"3.5936978921873863, 98.69116628439171\"},\n            {title:\"JF Accessories\",   city: \"Batam\",address: \"Komp Ruko Puri Niaga blok GG no.12-13, Batam\", phone: \"0823-8271-1314\", position: \"1.045261308371697, 103.97524103472958\"},\n            {title:\"Surya Jaya Motor\",  city: \"Tangerang\",address: \"RE. Martadinata No. 279\/20, Pondok Cabe, Tangerang Selatan\", phone: \"021 - 749.4405\", position: \"-6.350082369624313, 106.74983610436678\"},\n            {title:\"Sumber Audio Pratama\",  city: \"Tangerang\", address: \"Jl. Raden Fatah Raya GG. Beringin 1 No. 61, Tangerang\", phone: \"0819-2153153\", position: \"-6.2394673229556705, 106.70231317076363\"},\n            {title:\"Bengkel Mobil Rajawali\",  city: \"Yogyakarta\",address: \"Kenari 83 Timur SGM Yogyakarta 55156, Yogyakarta\", phone: \"0274-586553\", position: \"-7.801466042052881, 110.39546254541779\"},\n            {title:\"ASIGEN\",  city: \"Denpasar\",address: \"Jl. Gatsu Timur Perempatan Seroja, Denpasar\", phone: \"0361 - 483.608\", position: \"-8.635391867813292, 115.22944943668374\"},\n            {title:\"Barito - BALI\",  city: \"Denpasar\",address: \"Jl. Tukad Barito No. 22 Pantjer Bali, Denpasar\", phone: \"0361.747.2726\", position: \"-8.68465773713614, 115.22863968834456\"},\n            {title:\"D'Best\",  city: \"Denpasar\", address: \"Tegal Dukuh VII No. 12 Penamparan Gatsu, Denpasar\", phone: \"0361 - 9005207\/08\", position: \"-8.638991920673982, 115.18990060915783\"},\n            {title:\"HG Audiophile Car Audio\",  city: \"Surabaya\",address: \"Jl. Ngagel Jaya Utara No.132, Baratajaya, Kec. Gubeng, Surabaya, Jawa Timur 60284, Indonesia\", phone: \"087852292000\", position: \"-7.289539748543901, 112.7609481323004\"},\n\t\t\t\t\t\t\t\t{title:\"RS Sound & Variasi\", \ncity:\"Malang\" ,\naddress:\"Jl Riam no.5 Malang - Jawa Timur\", \nphone: \"0813-3475-9999\", \nposition: \"-7.9609371165026666, 112.63880861502578\"}\n\n        ];      \n\n            function templateEmptyListMapItem(querySearch){\n                return `<div class=\"empty-list-map-item\">\n                            <div class=\"list-map-body\">\n                                <p>\n                                    Keyword '${querySearch}' is empty. Please try anoher keyword                                <\/p>\n                            <\/div>\n                        <\/div>`\n            }\n\n            function templateListMapItem(obj, index){\n                return `<div class=\"list-map-item\" data-title=\"${obj.title}\" data-address=\"${obj.address}\">\n                            <a class=\"list-map-heading\" href=\"#\" data-index=\"${index}\">${obj.title}<\/a>\n                            <div class=\"list-map-body\">\n                                <p>\n                                    ${obj.address}\n                                    ${obj.phone ? `<br\/><b>Phone Number: <\/b> ${obj.phone}` : \"\"}\n                                <\/p>\n                            <\/div>\n                        <\/div>`\n            }\n\n            function templateInfoWindowContent(obj){\n                \/\/ const sampleData = {\n                \/\/     title: \"\",\n                \/\/     address: \"\",\n                \/\/     phone: \"\"\n                \/\/ }\n                return `<div>\n                    <h3 class=\"my-map-heading\">${obj.title}<\/h3>\n                    <div class=\"my-map-body\">\n                        <p>\n                            ${obj.address}\n                            ${obj.phone ? `<br\/><b>Phone Number: <\/b> ${obj.phone}` : \"\"}\n                        <\/p>\n                    <\/div>\n                <\/div>`\n            }\n\n            function splitPosition(position){\n                const positionSplit = position.split(\", \")\n                const lat = parseFloat(positionSplit[0])\n                const lng = parseFloat(positionSplit[1])\n\n                return { \n                    lat, \n                    lng \n                }\n            }\n\n            \/\/ Initialize and add the map\n            let map;\n\n            async function initMap() {\n                \/\/ The location of The Loud Minority\n                \/\/ const position = { lat: -6.2438573, lng: 106.7940091 };\n                \/\/ The location of Cilandak Town Square\n                \/\/ const position2 = { lat: -6.2884203, lng: 106.8050145 };\n                \/\/ Request needed libraries.\n                \/\/@ts-ignore\n                const { Map } = await google.maps.importLibrary(\"maps\");\n                const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n\n                \/\/ const pinGlyph = new google.maps.marker.PinElement({\n                \/\/     glyph: \"AA\",\n                \/\/     glyphColor: \"white\",\n                \/\/ });\n                \/\/ const pinGlyph2 = new google.maps.marker.PinElement({\n                \/\/     glyph: \"BB\",\n                \/\/     glyphColor: \"white\",\n                \/\/ });\n                const infoWindow = new google.maps.InfoWindow({\n                    content: \"\",\n                    disableAutoPan: true,\n                });\n                \n                map = new Map(document.getElementById(\"map\"), {\n                    zoom: 14,\n                    center: {\n                        lat: -6.2459318, lng: 106.7917129\n                    },\n                    mapId: \"DEMO_MAP_ID\",\n                });\n\n                \/\/ \/\/ The marker, positioned at The Loud Minority\n                \/\/ const marker = new AdvancedMarkerElement({\n                \/\/     map: map,\n                \/\/     position: position,\n                \/\/     title: \"The Loud Minority\",\n                \/\/     content: pinGlyph.element\n                \/\/ });\n                \/\/ marker.addListener(\"click\", () => {\n                \/\/     const obj1 = {\n                \/\/         title: \"The Loud Minority\",\n                \/\/         address: \"Jl. Mendawai I No. 39, Kramat Pela, Kec. Kebayoran Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12130\"\n                \/\/     }\n                \/\/     infoWindow.setContent(templateInfoWindowContent(obj1));\n                \/\/     infoWindow.open(map, marker);\n                \/\/     map.panTo({ lat: -6.2438573, lng: 106.7940091 })\n                \/\/ });\n\n                \/\/ \/\/ ------------\n                \/\/ \/\/ The marker, positioned at The Loud Minority\n                \/\/ const marker2 = new AdvancedMarkerElement({\n                \/\/     map: map,\n                \/\/     position: position2,\n                \/\/     title: \"Cilandak Town Square\",\n                \/\/     content: pinGlyph2.element\n                \/\/ });\n                \/\/ marker2.addListener(\"click\", () => {\n                \/\/     const obj2 = {\n                \/\/         title: \"Cilandak Town Square\",\n                \/\/         address: \"Jl. TB Simatupang No.17, RT.6\/RW.9, Cilandak Bar., Kec. Cilandak, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12430\"\n                \/\/     }\n                \/\/     infoWindow.setContent(templateInfoWindowContent(obj2));\n                \/\/     infoWindow.open(map, marker2);\n                \/\/     map.panTo({ lat: -6.2884203, lng: 106.8050145 })\n                \/\/ });\n\n                \/\/ ------------------\n                locations.map((a, idx) => {\n                    const listMapItem = templateListMapItem(a, idx)\n                    jQuery(\".list-map-items-wrapper\").append(listMapItem)\n\n\n                    \/\/ tidak usah dipakai\n                    \/\/ const pinGlyph = new google.maps.marker.PinElement({\n                    \/\/     glyph: \"\",\n                    \/\/     glyphColor: \"white\",\n                    \/\/ });\n\n                    const { lat, lng } = splitPosition(a.position)\n                    const position = {\n                        lat,\n                        lng\n                    }\n\n                    const marker3 = new AdvancedMarkerElement({\n                        map: map,\n                        position: position,\n                        title: a.title,\n                        \/\/ content: pinGlyph.element \/\/ tidak usah dipakai\n                    });\n                    marker3.addListener(\"click\", () => {\n                        infoWindow.setContent(templateInfoWindowContent({\n                            title: a.title,\n                            address: a.address,\n                            phone: a.phone\n                        }));\n                        infoWindow.open(map, marker3);\n                        map.panTo(a.position)\n                    });\n                    locations[idx][\"marker\"] = marker3\n                })\n                \n\n                setTimeout(() => {\n                    jQuery(\".list-map-heading\").on(\"click\", function(e){\n                        const index = parseInt(e.target.dataset.index)\n                        \n                        \/\/ map.setZoom(locations[index].zoom)\n\n                        const { lat, lng } = splitPosition(locations[index].position)\n                        const position = {\n                            lat,\n                            lng\n                        }\n                        \/\/ map.setCenter(new google.maps.LatLng(lat, lng))\n                        map.setCenter(position)\n                        infoWindow.setContent(templateInfoWindowContent({\n                            title: locations[index].title,\n                            address: locations[index].address,\n                            phone: locations[index].phone,\n                        }));\n                        infoWindow.open(map, locations[index].marker);\n                    })\n                }, 500);\n\n                let myTimeout = null\n                jQuery(\".my-map-search-input\").on(\"input\", function(e){\n                    const querySearch = e.target.value\n                    clearTimeout(myTimeout)\n                    myTimeout = setTimeout(() => {\n                        let totalDataFound = 0\n                        let bounds = new google.maps.LatLngBounds();\n\n                        document.querySelectorAll(\".list-map-item\").forEach((el, idx)=>{\n                            const dataTitle = el.dataset.title\n                            const dataAddress = el.dataset.address\n                            \n                            \/\/ search by title and address\n                            if(dataTitle.toLowerCase().includes(querySearch.toLowerCase()) \n                                || dataAddress.toLowerCase().includes(querySearch.toLowerCase())\n                            ){\n                                el.style.display = \"block\"\n                                totalDataFound++\n                                locations[idx][\"marker\"].setMap(map)\n                                \n                                const { lat, lng } = splitPosition(locations[idx].position)\n                                bounds.extend({ lat, lng });\n                            } else {\n                                el.style.display = \"none\"\n                                locations[idx][\"marker\"].setMap(null)\n                            }\n                        })\n\n                        setTimeout(() => {\n                            if(totalDataFound === 0){\n                                if(jQuery(\".empty-list-map-item\")){\n                                    jQuery(\".empty-list-map-item\").remove()\n                                }\n                                jQuery(\".list-map-items-wrapper\").append(templateEmptyListMapItem(querySearch))\n                            } else {\n                                if(jQuery(\".empty-list-map-item\")){\n                                    jQuery(\".empty-list-map-item\").remove()\n                                }\n                            }\n\n                            map.fitBounds(bounds); \/\/ set position to center of all store found\n                        }, 100);\n                    }, 250);\n                })\n            }\n\n            initMap();\n        <\/script>\n      <script>\n    document.addEventListener('DOMContentLoaded', function () {\n        \/\/ Add event listeners for city filter buttons\n        const filterButtons = document.querySelectorAll('.filter-button');\n        filterButtons.forEach(button => {\n            button.addEventListener('click', function () {\n                filterButtons.forEach(btn => btn.classList.remove('active'));\n                this.classList.add('active');\n                const selectedCity = this.getAttribute('data-city');\n                filterLocations(selectedCity);\n            });\n        });\n\n        \/\/ Assuming locations is an array of objects with latitude, longitude, and title properties\n        const locations = [\n            {title:\"C\/A\/S\", city: \"Jakarta\", address: \"MGK lantai V blok F2 no.1, Jakarta Pusat\", phone: \"021 - 654.0282\", position: \"-6.154753199110116, 106.84899441595887\"},\n            {title:\"Citra Baru Motor\", city: \"Jakarta\", address: \"Blok M Mall Lt. Basement B\/11, Jakarta Selatan\", phone: \"021 - 727.93735\", position: \"-6.243405208483359, 106.79932889059079\"},\n            {title:\"Kota Agung\", city: \"Jakarta\",address: \"Glodok Plaza Lt. 2 Blok D 5, Jakarta Selatan\", phone: \"021 - 367 20148\", position: \"-6.142323040091044, 106.81683156310446\"},\n            {title:\"Bronson\", city: \"Jakarta\",address: \"Arteri Kedoya No. 47 (Jl. Panjang), Jakarta Barat\", phone: \"021 - 569.64608\", position: \"-6.176777233448822, 106.76644860165237\"},\n            {title:\"Elixir Car Stereo\", city: \"Jakarta\",address: \"Jl. Arjuna Selatan No. 39, Jakarta Barat\", phone: \"0813-28567172\", position: \"-6.189593111949752, 106.772070393506\"},\n            {title:\"Empire\",city: \"Jakarta\", address: \"MGK Lt. UG Blok A11 No. 1 Jlang Kasa Kav, Jakarta Utara\", phone: \"021-29135156\", position: \"-6.154737741872982, 106.84899877285847\"},\n            {title:\"Brembrem\", city: \"Bekasi\",address: \"Axc summarecon bekasi Blok VG 21 - VG 22, RT.003\/RW.002, Marga Mulya, Kec. Bekasi Utara, Kota Bks, Jawa Barat 17143\", phone: \"0817-17113000\", position: \"-6.225815715116421, 107.00251672289039\"},\n            {title:\"TOMS\",city: \"Bandung\", address: \"Jl Cikawao no.50, Bandung\", phone: \"022 - 423.3221\", position: \"-6.928426428985633, 107.61545955425223\"},\n            {title:\"Sumber Berkat Variasi\", city: \"Bandung\",address: \"Jl Terusan Jakarta no.10D, Bandung\", phone: \"022 - 727.9561\", position: \"-6.913570365086595, 107.64615035666947\"},\n            {title:\"DINASTI Audio\", city: \"Bogor\",address: \"Jl. Darur Qur'an - Loji, Kec. Bogor Barat, Bogor\", phone: \"0877-25756144\", position: \"-6.584672684891573, 106.77178194869555\"},\n            {title:\"Gema Persada\",city: \"Bogor\", address: \"Jl. Cibalok, Ruko 11. RT.05\/RW.03, Pabaton, Kecamatan Bogor Tengah, Kota Bogor, Jawa Barat\", phone: \"0812-9889-2139\", position: \"-6.591607534700963, 106.79424047792793\"},\n            {title:\"Autocar\", city: \"Surabaya\",address: \"Ruko Galaxy Bumi Permai Blok G-6 \/ 3, Surabaya\", phone: \"031.599.3757\", position: \"-7.301570475800513, 112.78563478980954\"},\n            {title:\"Transindo\", city: \"Semarang\", address: \"Barito Jaya No. 12 A, Semarang\", phone: \"024 - 40145123\", position: \"-6.988489896861464, 110.43945404123757\"},\n            {title:\"Singaraja Car Audio\", city: \"Makassar\", address: \"Jl. Todopuli Raya Timur blok A3 no.19-20, Makassar\", phone: \"0411 - 466.3720\", position: \"-5.163337552163921, 119.45331978216818\"},\n            {title:\"FAA\",  city: \"Makassar\",address: \"Cakalang 14 Ruko BB \/ 16 (Depan Ruko), Makassar\", phone: \"0411 - 3625488\", position: \"-5.118329247839935, 119.41881231117233\"},\n            {title:\"ERA Motor\", city: \"Pontianak\", address: \"Jl. Teuku Umar no 7-9, Pontianak\", phone: \"0561 - 739.384\", position: \"-0.03038349017572514, 109.335792857085\"},\n            {title:\"Accoustic Audio\",  city: \"Palembang\",address: \"Jl. Lebak Rejo no.1 Sekip Tengah, Palembang\", phone: \"0711 - 314.485\", position: \"-2.9621126962600717, 104.75568841099236\"},\n            {title:\"Sinar Repelita\",  city: \"Medan\",address: \"Jl. Madio Santoso no 139 F, Medan\", phone: \"061 - 661.4915\", position: \"3.620627302284461, 98.6876375233135\"},\n            {title:\"Sonati\",  city: \"Medan\",address: \"Jl. Malaka no.64, Medan\", phone: \"061 - 414.7674\", position: \"3.5936978921873863, 98.69116628439171\"},\n            {title:\"JF Accessories\",   city: \"Batam\",address: \"Komp Ruko Puri Niaga blok GG no.12-13, Batam\", phone: \"0823-8271-1314\", position: \"1.045261308371697, 103.97524103472958\"},\n            {title:\"Surya Jaya Motor\",  city: \"Tangerang\",address: \"RE. Martadinata No. 279\/20, Pondok Cabe, Tangerang Selatan\", phone: \"021 - 749.4405\", position: \"-6.350082369624313, 106.74983610436678\"},\n            {title:\"Sumber Audio Pratama\",  city: \"Tangerang\", address: \"Jl. Raden Fatah Raya GG. Beringin 1 No. 61, Tangerang\", phone: \"0819-2153153\", position: \"-6.2394673229556705, 106.70231317076363\"},\n            {title:\"Bengkel Mobil Rajawali\",  city: \"Yogyakarta\",address: \"Kenari 83 Timur SGM Yogyakarta 55156, Yogyakarta\", phone: \"0274-586553\", position: \"-7.801466042052881, 110.39546254541779\"},\n            {title:\"ASIGEN\",  city: \"Denpasar\",address: \"Jl. Gatsu Timur Perempatan Seroja, Denpasar\", phone: \"0361 - 483.608\", position: \"-8.635391867813292, 115.22944943668374\"},\n            {title:\"Barito - BALI\",  city: \"Denpasar\",address: \"Jl. Tukad Barito No. 22 Pantjer Bali, Denpasar\", phone: \"0361.747.2726\", position: \"-8.68465773713614, 115.22863968834456\"},\n            {title:\"D'Best\",  city: \"Denpasar\", address: \"Tegal Dukuh VII No. 12 Penamparan Gatsu, Denpasar\", phone: \"0361 - 9005207\/08\", position: \"-8.638991920673982, 115.18990060915783\"},\n            {title:\"HG Audiophile Car Audio\",  city: \"Surabaya\",address: \"Jl. Ngagel Jaya Utara No.132, Baratajaya, Kec. Gubeng, Surabaya, Jawa Timur 60284, Indonesia\", phone: \"087852292000\", position: \"-7.289539748543901, 112.7609481323004\"}\n \n        ];\n\n        function createMarker(location) {\n            const myLatLng = new google.maps.LatLng(location.latitude, location.longitude);\n\n            \/\/ Creating a marker\n            const titleMarker = new google.maps.Marker({\n                position: myLatLng,\n                map: map,\n                title: location.title || 'Default Title',\n            });\n\n            \/\/ To set the map for the marker\n            titleMarker.setMap(map);\n\n            \/\/ Do something with titleMarker or return it if needed\n            return titleMarker;\n        }\n\n        function filterLocations(city) {\n            const bounds = new google.maps.LatLngBounds();\n            const fullBounds = new google.maps.LatLngBounds(); \/\/ Initialize a new LatLngBounds for all markers\n\n            \/\/ Clear existing markers and create new markers\n            locations.forEach(location => {\n                const marker = location.marker;\n                if (marker) {\n                    marker.setMap(null); \/\/ Clear existing marker from the map\n                }\n\n                const titleMarker = createMarker(location);\n                location.marker = titleMarker; \/\/ Store the created marker in the location object\n\n                if (location && (city === 'all' || (location.city && city.toLowerCase() === location.city.toLowerCase()))) {\n                    \/\/ Show marker if the location is defined and the city matches\n                    const { lat, lng } = splitPosition(location.position);\n                    bounds.extend({ lat, lng });\n                    fullBounds.extend({ lat, lng }); \/\/ Extend fullBounds with each marker's position\n\n                    \/\/ Update info window content for each marker\n                    const infoContent = templateListMapItem({\n                        title: location.title,\n                        address: location.address,\n                        phone: location.phone,\n                    });\n\n                    const infoWindow = new google.maps.InfoWindow({\n                        content: infoContent,\n                        disableAutoPan: true,\n                    });\n\n                    titleMarker.addListener('click', () => {\n                        infoWindow.open(map, titleMarker);\n                    });\n                }\n            });\n\n            if (city !== 'all') {\n                \/\/ Fit the map to the bounds of the selected city\n                map.fitBounds(bounds);\n            } else {\n                \/\/ Fit the map to all markers if 'All' is selected\n                map.fitBounds(fullBounds);\n            }\n        }\n    });\n    let myTimeout = null\n    jQuery(\".filter-button\").on(\"click\", function(e) {\n    const selectedCity = e.target.dataset.city.toLowerCase();\n\n    clearTimeout(myTimeout);\n    myTimeout = setTimeout(() => {\n        let totalDataFound = 0;\n        let bounds = new google.maps.LatLngBounds();\n\n        document.querySelectorAll(\".list-map-item\").forEach((el, idx) => {\n            const dataCity = locations[idx].city.toLowerCase();\n            const dataTitle = locations[idx].title.toLowerCase();\n            const dataAddress = locations[idx].address.toLowerCase();\n\n            \/\/ Filter items based on the selected city, title, or address\n           \/\/ Display all items if selected city is \"all\" or if data matches the selected city, title, or address\n           if (\n            selectedCity === \"all\" ||\n            dataCity === selectedCity\n            ) {\n                el.style.display = \"block\";\n                totalDataFound++;\n                locations[idx][\"marker\"].setMap(map);\n\n                const { lat, lng } = splitPosition(locations[idx].position);\n                bounds.extend({ lat, lng });\n            } else {\n                el.style.display = \"none\";\n                locations[idx][\"marker\"].setMap(null);\n            }\n        });\n\n        setTimeout(() => {\n            if (totalDataFound === 0) {\n                if(jQuery(\".empty-list-map-item\")){\n                                    jQuery(\".empty-list-map-item\").remove()\n                                }\n                jQuery(\".list-map-items-wrapper\").append(templateEmptyListMapItem(selectedCity));\n            } else {\n                jQuery(\".empty-list-map-item\").remove();\n            }\n\n            map.fitBounds(bounds); \/\/ set position to center of all stores found\n        }, 100);\n    }, 250);\n});\n\n\n<\/script>\n\n    <\/div>\n\n    <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-2758","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Car Audio Location - JBL Store<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jblstore.co.id\/en\/car-audio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Car Audio Location - JBL Store\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/car-audio\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-09T08:02:19+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/car-audio\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/car-audio\/\",\"name\":\"Car Audio Location - JBL Store\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2024-01-18T04:59:10+00:00\",\"dateModified\":\"2024-07-09T08:02:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/car-audio\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/car-audio\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/car-audio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Car Audio Location\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Car Audio Location - JBL Store","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jblstore.co.id\/en\/car-audio\/","og_locale":"en_US","og_type":"article","og_title":"Car Audio Location - JBL Store","og_url":"https:\/\/jblstore.co.id\/en\/car-audio\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2024-07-09T08:02:19+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/car-audio\/","url":"https:\/\/jblstore.co.id\/en\/car-audio\/","name":"Car Audio Location - JBL Store","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2024-01-18T04:59:10+00:00","dateModified":"2024-07-09T08:02:19+00:00","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/car-audio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/car-audio\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/car-audio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"Car Audio Location"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/2758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=2758"}],"version-history":[{"count":5,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/2758\/revisions"}],"predecessor-version":[{"id":97937,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/2758\/revisions\/97937"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=2758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}