1
<div class="col-md-7 col-sm-12">
<div id="geochart-colors">
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="map-info-contanier">
<div class="search-box">
<input placeholder="Buscar" onkeypress="pesquisarPrefeito()" id="busca" type="search">
<div class="search-box-sections" id="busca-box" style="display: none;">
<div class="search-box-section-results" id="resultado">
</div>
</div>
<div class="campo">
<div class="titulo">Município:<br></div>
<label id="nome-municipio"></label>
</div>
<div class="campo">
<div class="titulo">Prefeito:<br></div>
<label id="nome-prefeito"></label>
</div>
</div>
<div class="map-info">
</div>
</div>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function preencherCampos(cidade, prefeito){
var divResultado = document.getElementById('busca-box');
divResultado.style.display = 'none';
var nomeMunicipio = document.getElementById('nome-municipio');
nomeMunicipio.innerText = cidade;
var nomePrefeito = document.getElementById('nome-prefeito');
nomePrefeito.innerText = prefeito;
}
function Get(link){
var Httpreq = new XMLHttpRequest(); // a new request
Httpreq.open("GET",link,false);
Httpreq.send(null);
return Httpreq.responseText;
}
function pesquisarPrefeito() {
var pesquisa = document.getElementById("busca").value;
var link = "http://teste.teste.com.br/GetPrefeitos?filtro=" + pesquisa;
console.log(Get(link));
var cidades = JSON.parse(Get(link));
var html = "";
$(cidades).each(
function (i) {
console.log(cidades[i])
html += "<div onclick=\"preencherCampos('" + cidades[i].Cidade + " / " + cidades[i].Estado + "' , \'" + cidades[i].NomePrefeito + "\')\"> " + cidades[i].Cidade + " / " + cidades[i].Estado + " </div> ";
}
);
$("#busca-box").html(html);
var divResultado = document.getElementById('busca-box');
divResultado.style.display = 'block';
}
google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['State', 'City'],
['BR-AC', 'Acre'],
['BR-AL', 'Alagoas'],
['BR-AM', 'Amazonas'],
['BR-AP', 'Amapá'],
['BR-BA', 'Bahia'],
['BR-CE', 'Ceará'],
['BR-DF', 'Distrito Federal'],
['BR-ES', 'Espírito Santo'],
['BR-GO', 'Goiás'],
['BR-MA', 'Maranhão'],
['BR-MG', 'Minas Gerais'],
['BR-MS', 'Mato Grosso do Sul'],
['BR-MT', 'Mato Grosso'],
['BR-PA', 'Pará'],
['BR-PB', 'Paraíba'],
['BR-PE', 'Pernambuco'],
['BR-PI', 'Piauí'],
['BR-PR', 'Paraná'],
['BR-RJ', 'Rio de Janeiro'],
['BR-RN', 'Rio Grande do Norte'],
['BR-RO', 'Rondônia'],
['BR-RR', 'Roraima'],
['BR-RS', 'Rio Grande do Sul'],
['BR-SC', 'Santa Catarina'],
['BR-SE', 'Sergipe'],
['BR-SP', 'São Paulo'],
['BR-TO', 'Tocantins']
]);
var options = {
region: 'BR',
// displayMode: 'regions',
resolution: 'provinces',
datalessRegionColor: 'transparent',
forceIFrame: false,
colorAxis: '#f75192',
backgroundColor: 'transparent',
defaultColor: '#f75192',
enableRegionInteractivity: true,
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>