How to identify the states of a google map Maps of Brazil to be able to change the background color individually?

Asked

Viewed 20 times

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>

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.