<!DOCTYPE html>
<head>
<style>
#mapa{
width: 400px;
height: 400px;
float:left;
background: green;
}
#infor{
width: 400px;
height: 400px;
float:left;
}
</style>
<meta charset="UTF-8">
<!--IMPORTANTE RESPETAR EL ORDEN -->
<!--ESTILOS DE BOOSTRAP -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js" ></script>
<!--ARCHIVOS JAVASCRIPT DE BOOTSTRAP -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC4Pta07pYlzbICVniGLYta4MLCrUrXrHE&sensor=false&libraries=geometry&v=3.4"></script>
<script>
//VARIABLES GENERALES
//declaras fuera del ready de jquery
var nuevos_marcadores = [];
var marcadores_bd= [];
var mapa = null; //VARIABLE GENERAL PARA EL MAPA
//FUNCION PARA QUITAR MARCADORES DE MAPA
function limpiar_marcadores(lista)
{
for(i in lista)
{
//QUITAR MARCADOR DEL MAPA
lista[i].setMap(null);
}
}
$(document).on("ready", function(){
//VARIABLE DE FORMULARIO
var formulario = $("#formulario");
var punto = new google.maps.LatLng(-13.163622,-72.545926);
var config = {
zoom:17,
center:punto,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapa = new google.maps.Map( $("#mapa")[0], config );
google.maps.event.addListener(mapa, "click", function(event){
var coordenadas = event.latLng.toString();
coordenadas = coordenadas.replace("(", "");
coordenadas = coordenadas.replace(")", "");
var lista = coordenadas.split(",");
var direccion = new google.maps.LatLng(lista[0], lista[1]);
//PASAR LA INFORMACIÓN AL FORMULARIO
formulario.find("input[name='titulo']").focus();
formulario.find("input[name='cx']").val(lista[0]);
formulario.find("input[name='cy']").val(lista[1]);
var marcador = new google.maps.Marker({
//titulo:prompt("Titulo del marcador?"),
position:direccion,
map: mapa,
animation:google.maps.Animation.DROP,
draggable:false
});
//ALMACENAR UN MARCADOR EN EL ARRAY nuevos_marcadores
nuevos_marcadores.push(marcador);
google.maps.event.addListener(marcador, "click", function(){
});
//BORRAR MARCADORES NUEVOS
limpiar_marcadores(nuevos_marcadores);
marcador.setMap(mapa);
});
$("#btn_grabar").on("click", function(){
//INSTANCIAR EL FORMULARIO
var f = $("#formulario");
$.ajax({
type:"POST",
url:"iajax.php",
dataType:"JSON",
data:f.serialize()+"&tipo=grabar",
success:function(data){
alert(data.mensaje);
listar();
},
beforeSend:function(){
},
complete:function(){
}
});
return false;
});
//CARGAR PUNTOS AL TERMINAR DE CARGAR LA PÁGINA
listar();//FUNCIONA, AHORA A GRAFICAR LOS PUNTOS EN EL MAPA
});
//FUERA DE READY DE JQUERY
//FUNCTION PARA RECUPERAR PUNTOS DE LA BD
function listar()
{
//ANTES DE LISTAR MARCADORES
//SE DEBEN QUITAR LOS ANTERIORES DEL MAPA
limpiar_marcadores(marcadores_bd);
$.ajax({
type:"POST",
url:"iajax.php",
dataType:"JSON",
data:"&tipo=listar",
success:function(data){
if(data.estado=="ok")
{
//alert("Hay puntos en la BD");
$.each(data.mensaje, function(i, item){
//OBTENER LAS COORDENADAS DEL PUNTO
var posi = new google.maps.LatLng(item.cx, item.cy);//bien
//CARGAR LAS PROPIEDADES AL MARCADOR
var marca = new google.maps.Marker({
idMarcador:item.IdPunto,
position:posi,
titulo: item.Titulo
});
//AGREGAR EVENTO CLICK AL MARCADOR
google.maps.event.addListener(marca, "click", function(){
alert("Hiciste click en "+marca.idMarcador + " - " + marca.titulo) ;
});
//AGREGAR EL MARCADOR A LA VARIABLE MARCADORES_BD
marcadores_bd.push(marca);
//UBICAR EL MARCADOR EN EL MAPA
marca.setMap(mapa);
});
}
else
{
alert("NO hay puntos en la BD");
}
},
beforeSend:function(){
},
complete:function(){
}
});
}
//PLANTILLA AJAX
</script>
</head>
<body>
<div id="mapa">
<h2>Aquí irá el mapa!</h2>
</div>
<div id="infor">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Agregar
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="formulario">
<table>
<tr>
<td>Título</td>
<td><input type="text" class="form-control" name="titulo" autocomplete="off"/></td>
</tr>
<tr>
<td>Coordenada X</td>
<td><input type="text" class="form-control" readonly name="cx" autocomplete="off"/></td>
</tr>
<tr>
<td>Coordenada Y</td>
<td><input type="text" class="form-control" readonly name="cy" autocomplete="off"/></td>
</tr>
<tr>
<td><button type="button" id="btn_grabar" class="btn btn-success btn-sm">Grabar</button></td>
<td><button type="button" class="btn btn-danger btn-sm">Cancelar</button></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Buscar
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Eliminar
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
...
</div>
</div>
</div>
</div>
</div>
</body>
</html>