I'm using this map on a site link I would like to leave states where we have unity with a different color, colleagues know how?
There is this section where the color of all the states is:
var options = {
region: 'BR',
resolution: 'provinces',
datalessRegionColor: 'white',
defaultColor: '#cdcdcd',
enableRegionInteractivity: true,
};
But I wanted different colors for some states.
EDITION
Take a look at JSFiddle and see if this is how you want it to work:
The differences are only due to CSS and HTML, which I've changed, so do not be surprised.
HTML
Be careful with your HTML. Use patterns that have meaning. Worry about semantics.
<section>
<h1> Atualmente a nossa Matriz esta localizada em Minas Gerais e possuímos filiais nos Estados de São Paulo, Goiás, Ceará e Pará. Selecione o Estado abaixo e veja a localização de cada uma de nossas unidades.
</h1>
<!-- Renderiza o gráfico -->
<div id="mapa-do-brasil" style="width: 750px; height: 500px;"></div>
<div id="detalhes-das-lojas">
<h2>
<span id="estado"></span>
</h2>
<p>
<span>Loja: </span><span id="loja"></span>
</p>
<p>
<span>Fone: </span><span id="fone"></span>
</p>
<p>
<span>Endereço: </span><span id="endereco"></span>
</p>
</div>
</section>
JavaScript
Do not be afraid to use JavaScript. Despite being a very good library, Google Charts is still JavaScript. Always keep this in mind.
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(distribuicaoDasLojasPorEstado);
function distribuicaoDasLojasPorEstado() {
// Dados do mapa
var data = google.visualization.arrayToDataTable([
['Estado', 'Lojas'],
['Minas Gerais', 1],
['São Paulo', 1],
['Goiás', 1],
['Ceará', 1],
['Pará', 1]
]),
// Opções do mapa
options = {
region: 'BR',
resolution: 'provinces',
datalessRegionColor: '#C8F7C5',
defaultColor: '#cdcdcd',
enableRegionInteractivity: true,
legend: 'none'
},
// Objeto mapa - SVG, renderizado na DIV de ID #mapa-do-brasil
mapa = new google.visualization.GeoChart(document.getElementById('mapa-do-brasil'));
// Objeto com as informações das unidades
unidades = {
"Minas Gerais" : {
"Loja": "Matriz - São Sebastião do Paraíso",
"Fone": "(35) 3539-8150",
"Endereço" : "Av. Dárcio Cantieri, nº 1750 - Jardim São José - CEP: 37950-000"
},
"Ceará": {
"Loja": "Filial - Fortaleza",
"Fone": "(85) 3211-6666",
"Endereço": "Av. Heraclito Graça, nº 395 - Centro - CEP: 60.140-061"
},
"São Paulo": {
"Loja": "Filial - São Paulo",
"Fone": "(11) 4083-2610",
"Endereço": "EDIFÍCIO DENVER/Av. Fagundes Filho, nº 145 – CJ 48Vila Monte Alegre - CEP: 04.304-000"
},
"Pará": {
"Loja": "Filial - Belém",
"Fone": "(91) 3075-5500",
"Endereço": "Av. Assis de Vasconcelos, nº 488 – Campina - CEP: 66.017-070"
},
"Goiás": {
"Loja": "Filial - Goiânia",
"Fone": "(62) 3291-5309",
"Endereço": "Endereço: Rua 29, nº 62- Quadra L18, Lote 14 Setor Oeste - CEP: 74.140-060"
}
};
// Função para mostrar as informações da loja ao clicar no mapa
function mostrarDetalhes () {
// Imprime no console a seguinte frase
console.log('Executando a função "mostrarDetalhes()"');
// Pega o evento click
var estadoSelecionado = mapa.getSelection();
// Mostra no console a seleção no mapa
console.log(estadoSelecionado);
// Pega o nome do Estado
message = '';
estadoSelecionado.forEach (function (part, index) {
var item = estadoSelecionado[index];
// Verifica o índice das linhas
if ( item.row != null ) {
var estado = "";
switch(item.row) {
// Os cases devem estar
case 0:
estado = "Minas Gerais";
break;
case 1:
estado = "São Paulo";
break;
case 2:
estado = "Goiás";
break;
case 3:
estado = "Ceará";
break;
case 4:
estado = "Pará";
break;
}
var loja = unidades[estado]["Loja"],
fone = unidades[estado]["Fone"],
endereco = unidades[estado]["Endereço"];
console.log(loja + ' - ' + fone + ' - ' + endereco + ' - ' + estado);
// Imprime os dados no HTML
document.getElementById("estado").textContent = estado;
document.getElementById("loja").textContent = loja;
document.getElementById("fone").textContent = fone;
document.getElementById("endereco").textContent = endereco;
}
});
}
// Monitora o evento click no mapa
google.visualization.events.addListener(mapa, 'select', mostrarDetalhes);
// Renderiza o mapa
mapa.draw(data, options);
}
CSS
Use CSS to take care of the look of the page. Separate CSS, HTML, and JavaScript whenever you can.
h1 {
font-family: "Calibri Light", sans-serif;
color: #333;
}
External Files
This is the only file needed to render Google Charts and maps.
https://www.gstatic.com/charts/loader.js
Notes
You can still improve JavaScript code a lot, you can refactor later.
Add styles with CSS, avoid CSS inline, but if necessary use (less laborious to maintain)
ORIGINAL
Could you put the complete map code?
Perhaps looking at the documentation, we could indicate the states that have units with the number 1 and those that do not have units with 0, or not informed. So you could add color to states with a value of 1 and leave states with a value of 0 blank.
Or rather, you could indicate the number of units in each state, so states with the highest number of units would appear in color different from those with fewer units or units.
You just need to create a list of type:
var data = google.visualization.arrayToDataTable([
['Estado', 'Unidades'],
['Acre', 3],
['Alagoas', 5],
// ...
['Sergipe', 10],
['Tocantins', 7]
]);
You can see this here: JSFiddle
And documentation .