CODEWITHSUNDEEP
javascriptcssgoogle-mapsgoogle-maps-api-3
Kishlin
Kishlin

Reputation: 373

Markers with text on a Google GeoChart

I'm trying to make a Google GeoChart that should look like this : enter image description here

But, problem is, I'm not even sure it is possible to mix up markers and text in them.

Right now my code is the following :

google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
        ['Region', 'Gagnants'],
        ['Alsace', 6], ['Aquitaine', 1], ['Auvergne', 5], ['Basse-Normandie', 2], ['Bourgogne', 1], ['Bretagne', 7], ['Centre', 1], ['Champagne-Ardenne', 0], ['Corse', 9], ['Franche-Comté', 1], ['Haute-Normandie', 0], ['Île-de-France', 7], ['Languedoc-Roussillon', 0], ['Limousin', 7], ['Lorraine', 1], ['Midi-Pyrénées', 2], ['Nord-Pas-de-Calais', 53], ['Pays de la Loire', 7], ['Picardie', 0], ['Poitou-Charentes', 1], ['Provence-Alpes-Côte d\'Azur', 10], ['Rhône-Alpes', 21]
    ]);

    var options = {region: "FR",
        resolution: "provinces",
        colorAxis: {colors: ['#FFF9F7', '#FC4C13']}
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
}

Which gives me that :

enter image description here

And that's pretty far from what I want. I thought about giving up on google's api and creating a big div holding the raw map as background, and create the markers as text block to positition them right above the corresponding region and set the red marker as background. But it will be the devil's own work to make it look good on every sizes of screens...

Any ideas? Thanks ! :)

Upvotes: 1

Views: 1924

Answers (1)

miguev
miguev

Reputation: 4865

You could use the Google Maps JavaScript API to add custom markers or markers with labels. Note that the latter is not part of the Google Maps API.

But all of this is probably overkill, I'd rather live with the fact that numbers are visible when hovering each region.

If you also want to highlight each region in a different shade (depending on numbers) you'd need to draw polygons and Google doesn't provide their geometry in any way TMK, so you'd need to get those geometries from somewhere else.

Upvotes: 1

Related Questions