Tengo un mapa de google y quisiera que al hacer click en cierta zona del mapa, ademas de quedarse marcado con un marcador valga la redundancia, quisiera que en una ventana emergente se muestren automaticamente las coordenadas Lng y lat.
A mi esto me sale si hago todo en una sola pagina... pero si intento que grabe esas corrdenadas en la ventana emergente no me sale.
Este seria mi codigo
Código HTML:
<!DOCTYPE html> <head> <!--1--> <style> #mapa{ width: 700px; height: 450px; float:left; background: green; } #infor{ width: 700px; height: 450px; float:left; } </style> <!--1--> <!--2--> <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> <a href="http://URL/pop-up.html" onClick="window.open(this.href, this.target, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140'); return false;">Agregar Punto</a> <!-- 2--> <!--3--> <script> //ARRAY PARA ALMACENAR var marcadores_nuevos = []; //FUNCION PARA QUITAR MARCADORES function quitar_marcadores(lista) { for (i in lista) { lista[i].setMap(null); } } $(document).on("ready", function () { var formulario = $("#formulario"); var punto = new google.maps.LatLng(-11.67840, -76.39702); var config = { zoom: 10, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP }; var 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]); var marcador = new google.maps.Marker({ position: direccion, map: mapa, animation: google.maps.Animation.DROP, draggable: true }); //PASAR LAS COORDENADAS AL FORMULARIO formulario.find("input[name='cx1']").val(lista[0]); formulario.find("input[name='cy1']").val(lista[1]); formulario.find("input[name='titulo1']").focus(); //GUARDAR EL MARCADOR EN EL ARRAY marcadores_nuevos.push(marcador); google.maps.event.addListener(marcador, "click", function () { }); //EN EL MAPA QUITAR TODOS LOS DEMAS quitar_marcadores(marcadores_nuevos); //UBICAR EL MARCADOR EN EL MAPA marcador.setMap(mapa); }); }); </script> <!--3--> <meta charset='utf-8'/> <title></title> <link rel="stylesheet" href="Content/colorbox.css" /> <script src="Scripts/jquery.min.js"></script> <script src="Scripts/jquery.colorbox.js"></script> <script> $(document).ready(function(){ $(".inline").colorbox({inline:true, width:"50%"}); $(".callbacks").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> </head> <body> <p><a class='inline' href="#inline_content">Abrir formulario</a></p> <!-- CONTENIDO VENTANA --> <div style='display:none'> <div id='inline_content' style='padding:10px; background:#fff;'> <p><strong><form action="" method="get"> <table> <tr> <td>Título</td> <td><input type="text" class="form-control" name="titulo1" autocomplete="off"/></td> </tr> <tr> <td>Coordenada X</td> <td><input type="text" class="form-control" disabled="disabled" name="cx1" autocomplete="off"/></td> </tr> <tr> <td>Coordenada Y</td> <td><input type="text" class="form-control" disabled="disabled" name="cy1" autocomplete="off"/></td> </tr> <tr> <td><button type="button" 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></strong></p> </div> </div> <!--4--> <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" disabled="disabled" name="cx" autocomplete="off"/></td> </tr> <tr> <td>Coordenada Y</td> <td><input type="text" class="form-control" disabled="disabled" name="cy" autocomplete="off"/></td> </tr> <tr> <td><button type="button" 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"> </div> <!--4--> </body> </html>
Espero su ayuda ojala me hayan entendido
Saludos
