{"id":604,"date":"2018-09-21T17:59:42","date_gmt":"2018-09-21T12:29:42","guid":{"rendered":"http:\/\/demo.weblizar.com\/advanced-google-maps\/?page_id=604"},"modified":"2024-12-07T10:17:33","modified_gmt":"2024-12-07T04:47:33","slug":"interactive-mode-2","status":"publish","type":"page","link":"https:\/\/demo.weblizar.com\/advanced-google-maps\/","title":{"rendered":"Interactive Mode"},"content":{"rendered":"                <style type=\"text\/css\">\r\n                    #map-603 {\r\n                        height: 650px;\r\n                        width: 100%;\r\n                    }\r\n                <\/style>\r\n                <script type=\"text\/javascript\">\r\n                    google.charts.load('current', {\r\n                        'packages': ['geochart'],\r\n                        'mapsApiKey': 'AIzaSyBkVUhjF3pcx-9b5himDwA-PpFMkUZyrUg'\r\n                    }).then(function () {\r\n                        var data = google.visualization.arrayToDataTable([\r\n                            ['Country', 'Value', 'Tooltip'],\r\n\t\t\t\t\t\t\t                            ['Los Angeles', 1, 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                            [' London', 2, ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                            [' Lisbon', 3, ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                            [' MelBourne', 4, ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                            [' Brazil', 5, ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                            [' India', 6, ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                            [' China', 7, ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                            [' Montana', 8, ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. '],\r\n\t\t\t\t\t\t\t                        ]);\r\n\r\n                        var view = new google.visualization.DataView(data);\r\n                        view.setColumns([0, 1]);\r\n\r\n                        var GeoChart = new google.visualization.ChartWrapper({\r\n                            chartType: 'GeoChart',\r\n                            containerId: 'map-603',\r\n                            dataTable: view,\r\n                            options: {\r\n                                region: 'world',\r\n                                legend: {textStyle: {color: 'blue', fontSize: 16}},\r\n                                legend: 'none',\r\n                                datalessRegionColor: '#e2e2e2',\r\n                                defaultColor: '#f5f5f5',\r\n                                backgroundColor: {\r\n                                    fill: '#fcfcfc',\r\n                                    stroke: '#fcfcfc',\r\n                                    strokeWidth: 0,\r\n                                },\r\n                                resolution: 'countries',\r\n                                displayMode: 'markers',\r\n                                enableRegionInteractivity: true,\r\n                                keepAspectRatio: false,\r\n                                colorAxis: {\r\n                                    minValue: 0, maxValue: 8,\r\n                                    colors: [\r\n\t\t\t\t\t\t\t\t\t\t                                        '#dd3333',\r\n\t\t\t\t\t\t\t\t\t\t                                        '#000000',\r\n\t\t\t\t\t\t\t\t\t\t                                        '#81d742',\r\n\t\t\t\t\t\t\t\t\t\t                                        '#1e73be',\r\n\t\t\t\t\t\t\t\t\t\t                                        '#8224e3',\r\n\t\t\t\t\t\t\t\t\t\t                                        '#37b51b',\r\n\t\t\t\t\t\t\t\t\t\t                                        '#1eb1ce',\r\n\t\t\t\t\t\t\t\t\t\t                                        '#881bba',\r\n\t\t\t\t\t\t\t\t\t\t                                    ]\r\n                                },\r\n                                tooltip: {\r\n                                    textStyle: {color: '#1e73be'},\r\n                                    showColorCode: true,\r\n                                    trigger: 'focus',\r\n                                    isHtml: true,\r\n                                    showTitle: true},\r\n                            }\r\n                        });\r\n\r\n                        google.visualization.events.addListener(GeoChart, 'ready', function () {\r\n                            google.visualization.events.addListener(GeoChart.getChart(), 'select', function () {\r\n                                var selection = GeoChart.getChart().getSelection();\r\n                                if (selection.length > 0) {\r\n                                    \/\/window.open('http:\/\/' + data.getValue(selection[0].row, 2), '_blank');\r\n                                    var region_data = document.getElementById('map_data-603');\r\n                                    region_data.innerHTML = '<h2>' + data.getValue(selection[0].row, 0) + '<\/h2>' +\r\n                                        '<p>' + data.getValue(selection[0].row, 2) + '<\/p>';\r\n                                }\r\n                            });\r\n                        });\r\n                        GeoChart.draw();\r\n                    });\r\n                <\/script>\r\n\t\t\t<div class=\"wl_agm container\">\r\n    <div id=\"map-603\"><\/div>\r\n    <div id=\"map_data-603\"><\/div>\r\n    <p><\/p>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-width.php","meta":{"footnotes":""},"class_list":["post-604","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/pages\/604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/comments?post=604"}],"version-history":[{"count":2,"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/pages\/604\/revisions"}],"predecessor-version":[{"id":804,"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/pages\/604\/revisions\/804"}],"wp:attachment":[{"href":"https:\/\/demo.weblizar.com\/advanced-google-maps\/wp-json\/wp\/v2\/media?parent=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}