Use registered addresses in the database in JavaScript / Google Maps

Question

Use registered addresses in the database in JavaScript / Google Maps

Navigation

#1 by (3 votes)

5

I have in a database the following columns: client name, active or inactive, address and lat and lng coordinates.

I need to develop an application in PHP that will display in the Google Maps green bookmarks the active clients, and red the inactive each bookmark with its respective location.

I already have a static solution, need to know how the solution would look in PHP, how PHP will handle the data and execute in JavaScript.

Here is the code:

<!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><scripttype="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>

php mysql javascript google-maps

asked by anonymous 19.11.2014 / 13:54

1 answer

Dynamic menu using AngularJS Object type for data of type Time (Ex: 1 min and 56 seconds) in Android / Java?

score 3 · Answer 1

The solution you already have in JavaScript is a great start. What is missing is to generate this array of objects on the server side.

I could simply do this (code to be printed inside the script tag) next to a database search:

<?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;
?>

This while loop will create an array of objects that you can use as you had in javascript. Having a string can join more content with .= . Thus begins the string before the while, fills with objects within the while, and at the end closes the array. That is the javascript will be loaded with this content already present. The look will look something like this:

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

The possible problem here is how to convert latlang for GoogleMaps to use. This depends a bit on how you have saved it in the database. But having an array in JavaScript can always make .map() and create a new array with the objects with the correct property.

Type:

localizacao = localizacao.map(function(obj){ 
    return {
        nome: obj.nome, 
        latlng: new google.maps.LatLng(obj.latlng)
    };
});