{"id":37070,"date":"2026-08-19T11:06:15","date_gmt":"2026-08-19T11:06:15","guid":{"rendered":"https:\/\/gcblabs.com\/celebritree\/?page_id=37070"},"modified":"2026-08-21T09:45:31","modified_gmt":"2026-08-21T09:45:31","slug":"tree-map","status":"publish","type":"page","link":"https:\/\/gcblabs.com\/celebritree\/tree-map\/","title":{"rendered":"Tree Map"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"37070\" class=\"elementor elementor-37070\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1df5684 elementor-section-full_width elementor-section-height-default elementor-section-height-default sc_fly_static\" data-id=\"1df5684\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d7ac609 sc_content_align_inherit sc_layouts_column_icons_position_left sc_fly_static\" data-id=\"d7ac609\" data-element_type=\"column\" data-e-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-cba4383 elementor-widget__width-inherit sc_fly_static elementor-widget elementor-widget-shortcode\" data-id=\"cba4383\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <style>\n        .tree-filters {\n            display: flex;\n            gap: 15px;\n            align-items: center;\n            margin-bottom: 20px;\n            flex-wrap: wrap;\n        }\n\n        .tree-filters select {\n            width: 250px;\n            padding: 8px;\n        }\n\n        #tree-google-map {\n            width: 100%;\n            height: 600px;\n            border-radius: 10px;\n        }\n\n        @media (max-width: 767px) {\n\n            .tree-filters {\n                flex-direction: column;\n                align-items: stretch;\n            }\n\n            .tree-filters select {\n                width: 100%;\n            }\n\n            #tree-google-map {\n                height: 450px;\n            }\n        }\n    <\/style>\n\n\n    <!-- =========================\n         FILTERS\n    ========================== -->\n\n    <div class=\"tree-filters\">\n\n        <!-- Tree Filter -->\n        <select id=\"treeFilter\">\n\n            <option value=\"\">All Trees<\/option>\n\n            \n                <option value=\"mango\">\n                    mango                <\/option>\n\n            \n        <\/select>\n\n\n        <!-- Celebrity Filter -->\n        <select id=\"celebFilter\">\n\n            <option value=\"\">All Celebrities<\/option>\n\n        <\/select>\n\n\n        <!-- Location Filter -->\n        <select id=\"locationFilter\">\n\n            <option value=\"\">All Locations<\/option>\n\n        <\/select>\n\n    <\/div>\n\n\n    <!-- =========================\n         GOOGLE MAP\n    ========================== -->\n\n    <div id=\"tree-google-map\"><\/div>\n\n\n    <script>\n\n        let treeGoogleMap;\n\n        let treeMarkers = [];\n\n        let treeInfoWindow;\n\n\n        function initTreeGoogleMap() {\n\n            \/*\n             * Default Chennai location\n             *\/\n\n            treeGoogleMap = new google.maps.Map(\n                document.getElementById(\"tree-google-map\"),\n                {\n                    center: {\n                        lat: 13.0827,\n                        lng: 80.2707\n                    },\n\n                    zoom: 10,\n\n                    mapTypeControl: true,\n\n                    streetViewControl: false,\n\n                    fullscreenControl: true\n                }\n            );\n\n\n            treeInfoWindow = new google.maps.InfoWindow();\n\n\n            let celebrities = [];\n\n            let locations = [];\n\n\n            \n                    (function() {\n\n                        const marker = new google.maps.Marker({\n\n                            position: {\n                                lat: 13.039994810026,\n                                lng: 80.240886932785                            },\n\n                            map: treeGoogleMap,\n                            \/\/ icon: {\n                            \/\/         url: \"http:\/\/localhost\/celebritree\/wp-content\/uploads\/2026\/07\/tree3-17.jpg\",\n                            \/\/         scaledSize: new google.maps.Size(40, 40)\n                            \/\/     },\n                            title: \"mango\"\n                        });\n\n\n                        \/\/ =========================\n                        \/\/ MARKER DATA\n                        \/\/ =========================\n\n                        marker.tree =\n                            \"mango\";\n\n                        marker.celeb =\n                            \"Vivek\";\n\n                        marker.location =\n                            \"T. Nagar\";\n\n\n                        \/\/ =========================\n                        \/\/ POPUP CONTENT\n                        \/\/ =========================\n\n                        let popupContent = `\n\n                            <div style=\"\n                                max-width:260px; \n                                line-height:1.6;\n                            \">\n\n                        `;\n\n\n                        \n                            popupContent += `\n\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/gcblabs.com\/celebritree\/wp-content\/uploads\/2026\/08\/tree-update-1787220279.jpg\"\n                                    style=\"\n                                        width:120px;\n                                        height:120px;\n                                        object-fit:cover;\n                                        border-radius:8px;\n                                        display:block;\n                                        margin-bottom:10px;\n                                    \"\n                                >\n\n                                <b>Image Updated On:<\/b>\n                                20 Aug 2026\n                                <br><br>\n\n                            `;\n\n                        \n\n                        popupContent += `\n\n                            <strong>\ud83c\udf33 Tree Name:<\/strong>\n                            mango\n                            <br>\n\n                            <strong>\u2b50 Celebrity:<\/strong>\n                            Vivek\n                            <br>\n\n                            <strong>\ud83d\udccd Location:<\/strong>\n                            T. Nagar\n                        `;\n\n\n                        popupContent += `<\/div>`;\n\n\n                        \/\/ =========================\n                        \/\/ MARKER CLICK\n                        \/\/ =========================\n\n                        marker.addListener(\n                            \"click\",\n                            function() {\n\n                                treeInfoWindow.setContent(\n                                    popupContent\n                                );\n\n                                treeInfoWindow.open({\n                                    map: treeGoogleMap,\n                                    anchor: marker\n                                });\n\n                            }\n                        );\n\n\n                        \/\/ =========================\n                        \/\/ STORE MARKER\n                        \/\/ =========================\n\n                        treeMarkers.push(marker);\n\n\n                        \/\/ =========================\n                        \/\/ FILTER DATA\n                        \/\/ =========================\n\n                        celebrities.push(\n                            \"Vivek\"                        );\n\n\n                        locations.push(\n                            \"T. Nagar\"                        );\n\n\n                    })();\n\n                    \n\n            \/\/ =========================\n            \/\/ CELEBRITY DROPDOWN\n            \/\/ =========================\n\n            [\n                ...new Set(celebrities)\n            ]\n            .sort()\n            .forEach(function(c) {\n\n                if (c !== \"\") {\n\n                    const option =\n                        document.createElement(\"option\");\n\n                    option.value = c;\n\n                    option.text = c;\n\n                    document\n                        .getElementById(\"celebFilter\")\n                        .appendChild(option);\n                }\n\n            });\n\n\n            \/\/ =========================\n            \/\/ LOCATION DROPDOWN\n            \/\/ =========================\n\n            [\n                ...new Set(locations)\n            ]\n            .sort()\n            .forEach(function(l) {\n\n                if (l !== \"\") {\n\n                    const option =\n                        document.createElement(\"option\");\n\n                    option.value = l;\n\n                    option.text = l;\n\n                    document\n                        .getElementById(\"locationFilter\")\n                        .appendChild(option);\n                }\n\n            });\n\n\n            \/\/ =========================\n            \/\/ FILTER MARKERS\n            \/\/ =========================\n\n            function filterMarkers() {\n\n                const tree =\n                    document.getElementById(\"treeFilter\").value;\n\n                const celeb =\n                    document.getElementById(\"celebFilter\").value;\n\n                const location =\n                    document.getElementById(\"locationFilter\").value;\n\n\n                treeMarkers.forEach(function(marker) {\n\n                    const treeMatch =\n                        tree === \"\" ||\n                        marker.tree === tree;\n\n\n                    const celebMatch =\n                        celeb === \"\" ||\n                        marker.celeb === celeb;\n\n\n                    const locationMatch =\n                        location === \"\" ||\n                        marker.location === location;\n\n\n                    if (\n                        treeMatch &&\n                        celebMatch &&\n                        locationMatch\n                    ) {\n\n                        marker.setMap(treeGoogleMap);\n\n                    } else {\n\n                        marker.setMap(null);\n\n                    }\n\n                });\n\n            }\n\n\n            \/\/ =========================\n            \/\/ FILTER EVENTS\n            \/\/ =========================\n\n            document\n                .getElementById(\"treeFilter\")\n                .addEventListener(\n                    \"change\",\n                    filterMarkers\n                );\n\n\n            document\n                .getElementById(\"celebFilter\")\n                .addEventListener(\n                    \"change\",\n                    filterMarkers\n                );\n\n\n            document\n                .getElementById(\"locationFilter\")\n                .addEventListener(\n                    \"change\",\n                    filterMarkers\n                );\n\n        }\n\n\n        \/*\n         * Make function globally available\n         * for Google Maps callback\n         *\/\n\n        window.initTreeGoogleMap =\n            initTreeGoogleMap;\n\n    <\/script>\n\n\n    <!-- =========================\n         GOOGLE MAPS API\n    ========================== -->\n\n    <script\n        src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyB_jv5TL0l-beYhEVMcsYnKbKfoTYYt6ME&callback=initTreeGoogleMap\"\n        async\n        defer>\n    <\/script>\n\n\n    <\/div>\n\t\t\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>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-37070","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/pages\/37070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/comments?post=37070"}],"version-history":[{"count":37,"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/pages\/37070\/revisions"}],"predecessor-version":[{"id":37219,"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/pages\/37070\/revisions\/37219"}],"wp:attachment":[{"href":"https:\/\/gcblabs.com\/celebritree\/wp-json\/wp\/v2\/media?parent=37070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}