EDIÇÃO
Dá uma olhada no JSFiddle e vê se é assim que você quer que funcione:
EXEMPLO NO JSFIDDLE
As diferenças são decorrentes apenas do CSS e do HTML, que eu alterei, então, não estranhe isso.
HTML
Tome cuidado com seu HTML. Use padrões que tenham significado. Preocupe-se com a semântica.
<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
Não tenha medo de usar JavaScript. Apesar de ser uma biblioteca muito boa, a Google Charts ainda é JavaScript. Tenha sempre isso em mente.
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 para cuidar do visual da página. Separe sempre que puder o CSS, HTML e JavaScript.
h1 {
font-family: "Calibri Light", sans-serif;
color: #333;
}
Arquivos externos
Este é o único arquivo necessário para renderizar os gráficos e mapas Google Charts.
https://www.gstatic.com/charts/loader.js
Notas
Ainda dá pra melhorar muito o código JavaScript, você pode refatorar depois.
Adicione estilos com CSS, evite ao máximo CSS inline, mas se for necessário use (menos trabalhoso, inclusive para manter)
ORIGINAL
Você poderia colocar o código completo do mapa?
Talvez olhando a documentação, pudéssemos indicar os estados que têm unidades com o número 1 e os que não têm unidades com 0, ou não informados. Assim, você poderia adicionar cor aos estados com valor 1 e deixar os estados com valor 0 em branco.
Ou melhor, você poderia indicar o número de unidades em cadas estado, assim os estados com maior número de unidades apareceriam com cor diferente dos que têm menos unidades ou não têm unidades.
Você só precisaria criar uma lista do tipo:
var data = google.visualization.arrayToDataTable([
['Estado', 'Unidades'],
['Acre', 3],
['Alagoas', 5],
// ...
['Sergipe', 10],
['Tocantins', 7]
]);
Você pode ver isto aqui: JSFiddle
E a documentação.