5

Tenho em um banco de dados as seguintes colunas: nome do cliente, ativo ou inativo, endereço e coordenados lat e lng.

Eu preciso desenvolver uma aplicação em PHP que irá exibir no Google Maps marcadores verdes os clientes ativos, e vermelho os inativos cada marcador com sua respetiva localização.

Eu já tenho uma solução estática, precisar saber como ficaria a solução em PHP, como o PHP vai tratar os dados e executar no JavaScript.

Eis o código:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1., user-scalable=no" />
        <style type="text/css">
            html {
                height: 1%
            }
            body {
                height: 1%;
                margin:;
                padding:
            }
            #map_canvas {
                height: 1%
            }
            #info {
                position: absolute;
                z-index: 333;
                width: 19px;
                height: auto;
                float: right !important;
                top: 5px;
                right:;
                margin-right: 3px;
                border: 3px solid #f3f3f3;
                border-radius: 5px;
                padding:8px;
                background: #fff;
            }
            #info span {
                position: absolute;
                margin-top: 3px;
                margin-left: 1px;
            }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=&sensor=TRUE">

        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(-26.91597, -48.67952),
                    zoom: 7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    //mapTypeId: google.maps.MapTypeId.SATELLITE,
                    //mapTypeId: google.maps.MapTypeId.HYBRID
                    //mapTypeId: google.maps.MapTypeId.TERRAIN
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);


                //Esta aplicação pega o ponto atual e cria um marcador com um ícone da empresa
                /*var ponto = new google.maps.LatLng(-26.91597, -48.67952);
        var marker = new google.maps.Marker({
            position:ponto,
            map:map,
            title: 'Itajaí',
            draggable: true,
            icon: 'ativo2.png'
        })*/

                var localizacao = [];
                localizacao.push({
                    nome: "Joinville",
                    latlng: new google.maps.LatLng(-26.2784142, -48.8563719)
                });
                localizacao.push({
                    nome: "Balneário Camboriú",
                    latlng: new google.maps.LatLng(-27.8161, -48.626631)
                });
                localizacao.push({
                    nome: "Rio Grande do Sul",
                    latlng: new google.maps.LatLng(-3.4163414, -53.6677564)
                });
                localizacao.push({
                    nome: "Florianópolis",
                    latlng: new google.maps.LatLng(-27.6142358, -48.4828248)
                });
                localizacao.push({
                    nome: "Brusque",
                    latlng: new google.maps.LatLng(-27.912233, -48.8892335)
                });

                for (var i = ; i < localizacao.length; i++) {
                    var marker = new google.maps.Marker({
                        position: localizacao[i].latlng,
                        icon: 'ativo2.png',
                        map: map,
                        title: localizacao[i].nome
                    });
                }

                var localizacao = [];
                //localizacao.push({nome:"Penha", latlng: new google.maps.LatLng(-26.795582,-48.6325339)});
                //localizacao.push({nome:"Blumenau", latlng: new google.maps.LatLng(-26.8727952,-49.167329)});
                //localizacao.push({nome:"Navegantes", latlng: new google.maps.LatLng(-26.8631691,-48.6771822)});
                //localizacao.push({nome:"Ilhota", latlng: new google.maps.LatLng(-26.8654127,-48.8724734)});
                localizacao.push({
                    nome: "Gaspar",
                    latlng: new google.maps.LatLng(-26.9263595, -48.9522665)
                });

                for (var i = ; i < localizacao.length; i++) {
                    var marker = new google.maps.Marker({
                        position: localizacao[i].latlng,
                        icon: 'inativo2.png',
                        map: map,
                        title: localizacao[i].nome
                    });
                }

                //Esta aplicação pega as cooordenadas lng e lat e mostra no HTML
                /*google.maps.event.addListener(map, "bounds_changed", function(){
            var bounds = map.getBounds();
            var NE = bounds.getNorthEast();
            var SW = bounds.getSouthWest();
            var strHTML = "North East: " + NE.lat() + ", " + NE.lng() + "<br />";
            strHTML += "South West: " + SW.lat() + ", " + SW.lng();
            document.getElementById("info").innerHTML = strHTML;
        })*/
            }
            window.onload = initialize;
        </script>
    </head>

    <body>
        <div id="map_canvas" style="width:1%; height:1%"></div>
        <div id="info">
            <img src="ativo2.png" width="25" height="24"><span>Clientes Ativos: 5</span>
            <br />
            <img src="inativo2.png" width="25" height="24"><span>Clientes Inativos: 1</span>

        </div>
    </body>

</html>
5
  • O que você já fez? Qual a sua dúvida? Essa dúvida está muito ampla. 19/11/2014 às 12:54
  • 2
    Bem-vindo ao SOpt. Provavelmente esta pergunta será fechada por ser ampla demais. Estude developers.google.com/maps/?hl=pt-br. Depois tente fazer algo, se ficar com dificuldades ou dúvidas específicas edite esta pergunta para pedir ajuda.
    – Franchesco
    19/11/2014 às 12:57
  • 2
    Complementando o link passado pelo @Earendul, sugiro começar por aqui: developers.google.com/maps/documentation/javascript/…
    – bfavaretto
    19/11/2014 às 13:05
  • 2
    Igor: pode gerar um objeto em PHP para ser lido pelo javascript com cada grupo. Assim pode com javascript abrir os marcadores no mapa. Se tiver dificuldades no lado do servidor (PHP) pergunte aqui com o problema específico. O mesmo para se tiver problema no lado do cliente (javascript). Perguntar sobre ambos fica dificil responder conciso.
    – Sergio
    19/11/2014 às 13:06
  • 1
    @Sergio Desculpe, fiz pela ferramenta do moderador e só depois percebi.
    – utluiz
    19/11/2014 às 13:49

1 Resposta 1

3

A solução que já tem no JavaScript é um excelente começo. O que falta é gerar essa array de objetos no lado do servidor.

Podia fazer simplesmente assim (código a ser impresso dentro da tag script) junto a uma busca na base de dados:

<?php
$objetoMarcadores = 'var localizacao = [';
while($marcador = mysqli_fetch_assoc($resultados)){
    $objetoMarcadores.='{nome: '.$marcador["nome"].', latlng: '.$marcador["latlng"].' }';
}
$objetoMarcadores.='];';
$objetoMarcadores = trim($objetoMarcadores , ","); // para tirar a ultima virgula
echo $objetoMarcadores;
?>

Esse ciclo while vai criar uma array de objetos que pode usar como tinha no javascript. Tendo uma string pode juntar mais conteúdo com .=. Assim começa a string antes do while, preenche com objetos dentro do while e no fim fecha a array. Ou seja o javascript vai ser carregado com esse conteudo já presente. O aspeto será algo como:

var localizacao = [{ nome: "Florianópolis", latlng: .... etc ];

O eventual problema aqui é como converter o latlang para o GoogleMaps usar. Isso depende um pouco de como o tem guardado na base de dados. Mas tendo uma array no JavaScript pode sempre fazer .map() e criar uma nova array com os objetos com a propriedade corretas.

Tipo:

localizacao = localizacao.map(function(obj){ 
    return {
        nome: obj.nome, 
        latlng: new google.maps.LatLng(obj.latlng)
    };
});
6
  • Agradeço sua resposta, a solução que você propôs parece ser a ideal. Eu só terei que fazer dois select e while, um para trazer os clientes ativos e sua localização da mesma forma para os inativos.
    – Igor Silva
    19/11/2014 às 14:02
  • @IgorSilva pode juntar mais uma propriedade ao objeto, estado e assim só precisa de 1 Select. Ou então faz dois arrays um localizacaoAtivos e outro localizacaoInativos
    – Sergio
    19/11/2014 às 14:04
  • 1
    Sergio, acho que dessa forma que você mencionou seria a solução correta, testarei o código e postarei aqui o resultado sendo positivo ou não.
    – Igor Silva
    19/11/2014 às 14:07
  • @IgorSilva consegui pôr funcionar?
    – Sergio
    19/11/2014 às 21:25
  • Sergio, ainda não tentei implementar a aplicação com o back-end porque talvez irei trabalhar com geolocalização. O sistema vai pegar as coordenadas, e em outro mapa que servirá como um monitoramento, irá mostrar um marcador com a localização, atualizando a mesma de acordo com o deslocamento do individuo. Você saberia me dizer se há algum exemplo de como trabalhar dessa forma?
    – Igor Silva
    21/11/2014 às 1:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .