Mapa Interactivo Tiempo Real Google Maps

mapag

Mapa Interactivo Tiempo Real Google Maps

Este ejemplo es un mapa interactivo en tiempo real usando Google Maps. Casa usuario puede ir agregando lugares con una descripción, al momento de agregarlos estos se guardan en una base de datos MySQL y ademas todos los demás usuarios conectados reciben el nuevo lugar en tiempo real. El ejemplo utiliza librerías como
  • Google Maps Javascript
  • BootboxJS
  • NotyJS
  • PusherJS
  • PusherPHP
  • Jquery
  • PHPActiveRecord
  • Etc
El ejemplo funciona de la siguiente manera:
En la parte inferior da clic sobre un marcador y luego dobleclic en el mapa en el lugar donde quieras ponerlo. Asignale una descripción y dale aceptar. La información del marcador sera enviada al servidor y la recibirán los demás usuarios conectados en tiempo real. Al darle click a algun marcador de los que ya están en el mapa podemos ver la descripción del mismo.

El ejemplo lo puedes ver AQUÍ



Primero que nada vamos a crear una tabla en una base de datos de mysql con el siguiente script
CREATE TABLE IF NOT EXISTS `marcador` (
`id` INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT ,
  `latitud` FLOAT NOT NULL,
  `longitud` FLOAT NOT NULL,
  `descripcion` VARCHAR(200) NOT NULL,
  `src` VARCHAR(100) NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ;
El código del servidor del ejemplo es el siguiente
< ?php
 
//Le decimos a PHP que vamos a devolver objetos JSON
header('Content-type: application/json');
 
//Importamos la libreria de ActiveRecord
require_once 'php-activerecord/ActiveRecord.php';
require('Pusher.php');
//Configuracion de ActiveRecord
ActiveRecord\Config::initialize(function($cfg)
{
 //Ruta de una carpeta que contiene los modelos de la BD (tablas)
 $cfg->set_model_directory('models');
 //Creamos la conexion
 $cfg->set_connections(array(
  'development' => 'mysql://USUARIO:PASS@HOST/NOMBRE_BD'));
});
 
 
//Peticion para devolver los diferentes paises regisrados en ls BD
if(isset($_GET['getMarcadores'])){
 //Hacemos la consulta
 $marcadores = Marcador::find('all');
 //Devolvemos los registros de la BD en un formato JSON
 echo json_encode(datosJSON($marcadores));
}
 
//Peticion para guardar un nuevo marcador y repartirlo a los demas usuarios
if(isset($_GET['nuevoMarcador'])){
 unset($_GET['nuevoMarcador']);
 $marcador = Marcador::create($_GET);
 if($marcador){
  $res['scs'] = true;
  $res['msg'] = 'Marcador Agregado Correctamente';
  /*creamos un objeto pusher*/
  $pusher = new Pusher('KEY', 'SECRET', 'API_ID');
  //enviamos los datos del marcador recibido a todos los clientes conectados
  $pusher->trigger('marcador', 'nuevo', array('latitud' => $_GET['latitud'],'longitud' => $_GET['longitud'],'descripcion' => strip_tags($_GET['descripcion']),'src' => $_GET['src']));
  echo json_encode($res);
 }
 else{
  $res['scs'] = false;
  $res['msg'] = 'Error al agregar el marcador';
  echo json_encode($res);
 }
}
 
 
//funcion que convierte objetos regresados por la BD a JSON
function datosJSON($data, $options = null) {
 $out = "[";
 foreach( $data as $row) { 
  if ($options != null)
   $out .= $row->to_json($options);
  else 
   $out .= $row->to_json();
  $out .= ",";
 }
 $out = rtrim($out, ',');
 $out .= "]";
 return $out;
}
 
 
?>
Como vemos necesitamos estar registrados en PUSHER los pasos para registrar y obtener las KEYS para poder usar el ejemplo estan AQUÍ.
Ahora para la parte del cliente en JavaScript el codigo es el siguiente
var map,mar,mars;
var lats,lat;
var lons,lon;
var yaenvio;
var popups;
var marcadorElegido;
var marcadores;
var j;
 
 
 
$(document).ready(function() {
    //inicializacion de variables
    marcadores = new Array();
    popups = new Array();
    i = 0;
    marcadorElegido = m1.src;
 
 
    //Cuando demos clic en algun marcador de abajo, lo ponemos como el principal
    $('.marker').click(function(event) {
        $(".marker").animate({ 
            width: 48,
            height: 48
        }, 100 );
        $(this).animate({ 
            width: 56,
            height: 56
        }, 500 );
        marcadorElegido = this.src;
    });
 
    //cargamos el mapa
    map = cargarMapa(map,lat = 0,lon = 0);
    //Cuando hagamos dobleclick en el mapa agregamos un nuevo marcador
    google.maps.event.addListener(map, 'dblclick', function (event) {
        bootbox.prompt('Descripcion del lugar:',function(result){
            if (result === null) {                                             
                return;                             
            } else {
                load();
                params = {
                    latitud: event.latLng.lat(),
                    longitud: event.latLng.lng(),
                    descripcion: result,
                    src: marcadorElegido,
                    nuevoMarcador: true
                };
                //Los datos del marcador son enviados al servidor para guardalos y repartirlos a otros usuarios
                $.getJSON('servidor/servidor.php', params, function(json, textStatus) {
                    if(!json.scs){
                        nota('error',json.msg);
                    }
                    unload();
                });                          
            }
        });            
    });
 
 
    //inicializamos pusher con la KEY
    var pusher = new Pusher('KEY');
    //suscribirse al canal de comunicacion
    var channel = pusher.subscribe('marcador');
    //escuchar un evento llamado nuevo, que cuando se active entonces es por que alguien agrego un marcador
    //entonces pintamos el nuevo marcador sobre el mapa con la informacion recibida
    channel.bind('nuevo', function(datos) {
        marcadores[j] = cargarMarcador(marcadores[j],map,datos.latitud,datos.longitud,false,datos.src);
        marcadores[j].des = datos.descripcion;
        google.maps.event.addListener(marcadores[j], 'click', function (event) {
            if(typeof(popup) != 'undefined')popup.close();
            popup = new google.maps.InfoWindow({
                content: '<div class="infowindow-wrapper">'+this.des+'</div>'
            });
            popup.open(map,this);
        });
        j++;
        nota('success','Alguien Agrego un Marcador!!<br /><strong>Descripcion: </strong>'+datos.descripcion);  
    });
 
 
    //Cargamos los marcadores de la base de datos
    $.getJSON('servidor/servidor.php', {getMarcadores: true}, function(json, textStatus) {
        datos = $.parseJSON(json);
        for (var i = 0; i < datos.length; i++) {
            marcadores[i] = cargarMarcador(marcadores[i],map,datos[i].latitud,datos[i].longitud,false,datos[i].src);
            marcadores[i].des = datos[i].descripcion;
            google.maps.event.addListener(marcadores[i], 'click', function (event) {
                if(typeof(popup) != 'undefined')popup.close();
                popup = new google.maps.InfoWindow({
                    content: '<div class="infowindow-wrapper">'+this.des+''
                });
                popup.open(map,this);
            });  
        };
        j = i;
        unload();
    });
});
 
//funcion para cargar el mapa
function cargarMapa(map,lat,lon){
    if(map == undefined){
        var mapOptions = {
            center: new google.maps.LatLng(lat, lon),
            zoom: 3,
            disableDoubleClickZoom:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT,
                position: google.maps.ControlPosition.RIGHT_CENTER
            },
            scrollwheel: true,
            panControl:false,
            streetViewControl:false
 
        };
        map = new google.maps.Map(document.getElementById('map'),mapOptions);
    }
    else{
        centrarMapa(map,lat,lon);
    }
    return map;
}
 
//funcion que centra el mapa
function centrarMapa(map,lat,lon){
    map.panTo(new google.maps.LatLng(lat, lon));
}
 
//funcion para poner un marcador
function cargarMarcador(mar,map,lat,lon,dr,im){
    if(mar == undefined){
       var mar = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        draggable:dr,
        icon: im,
    });
       mar.setMap(map);
   }
   else{
    mar.setPosition(new google.maps.LatLng(lat, lon));
}
centrarMapa(map,lat,lon);
return mar;
}
 
 
//Funciones para quitar y poner el loader
function load(){
    $('#loader').show();
}
 
function unload(){
    $('#loader').hide();
}
 
//Funcion para enviar notificaciones
function nota(op,msg,time){
    if(time == undefined)time = 5000;
    var n = noty({
        text: msg,
        theme: 'defaultTheme',
        animation: {
            open: {height: 'toggle'}, 
            close: {height: 'toggle'},
            easing: 'swing', 
            speed: 500,
        },
        type:op,
        timeout:time,
        layout: 'topRight',
        maxVisible: 5
    });
}

El código completo del ejemplo lo puedes descargarAQUÍ

Pasos para correrlo correctamente:
Mete los archivos en la carpeta publica de tu servidor php XAMPP o WAMPP o el que utilices.
Crea tu cuenta en pusher.com para generar las KEYS.
En el archivo servidor.php y app.js pon estas KEYS.
Crea la tabla con el script que viene en la carpeta llamado BASE_DATOS.sql
Configura el archivo servidor.php con los datos de tu BD.
Listo.
Proxima
« Anterior
Anterior
Proxima »
Obrigado pelo seu comentário
.