Show administrative regions in map of Greece according to ISO 3166-2

25 views
Skip to first unread message

Ven

unread,
Jan 7, 2017, 6:49:32 PM1/7/17
to Google Visualization API
I am trying to add a geochart showing Greece in a custom html in joomla . Below you can find a javascript.
Please could you make corrections so as to:
1) show on map according to ISO 3166-2:GR the 13 Administrative Regions with the text?
  1. Attica / Αττική
  2. Central Greece / Στερεά Ελλάδα
  3. Central Macedonia / Κεντρική Μακεδονία
  4. Crete / Κρήτη
  5. Eastern Macedonia and Thrace / Ανατολική Μακεδονία και Θράκη
  6. Epirus / Ήπειρος
  7. Ionian Islands / Ιόνια νησιά
  8. North Aegean / Βόρειο Αιγαίο
  9. Peloponnese / Πελοπόννησος
  10. South Aegean / Νότιο Αιγαίο
  11. Thessaly / Θεσσαλία
  12. Western Greece / Δυτική Ελλάδα
  13. Western Macedonia / Δυτική Μακεδονία

2) The Western Macedonia / Δυτική Μακεδονία to have different color (e.g red) and to zoom on hover


<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
['City'],
['Attica'],
['Central Greece'],
['Central Macedonia'],
['Crete'],
['Eastern Macedonia and Thrace'],
['Epirus'],
['Ionian Islands'],
['North Aegean'],
['Peloponnese'],
['South Aegean'],
['Thessaly'],
['Western Greece'],
['Western Macedonia']

        ]);

        var options = {region: 'GR',
        displayMode: 'regions',
        colorAxis: {colors: ['#847c68']}
    };
        var chart = new google.visualization.GeoChart(document.getElementById('world_share'));
        chart.draw(data, options);
function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
    };
// ]]></script>
<div id="world_share" style="height: 500px;">&nbsp;</div>
map.PNG
Reply all
Reply to author
Forward
0 new messages