Tengo pensado algo asi pero no logro unir el html con el php... alguien puede echarme un cable?
Código HTML:
<?php session_start(); if($_SESSION['namecirc'] == true) { mostrar este form <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Trip Minded - Add Site</title> <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <link rel="stylesheet" href="colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://tripminded.com/app/circuits/colorbox/jquery.colorbox.js"></script> <link type="text/css" href="js/jquery-ui-1.8.6.custom.css" rel="Stylesheet" /> <link type="text/css" href="autocompletado.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script> <script type="text/javascript" src="js/colorbox.js"></script> <script type="text/javascript" src="js/ciudades.js"></script> <script type="text/javascript" src="js/funcionalidades.js"></script> <script type="text/javascript" src="js/jquery.ui.js"></script> </head> <body> <center> <table width="800" border="1"> <tr> <th width="267" scope="row"> </th> <td width="225" align="center"><div style="font-weight: 700; font-size:20px; width: 596px">Add Sites for your Circuit</div></td> <td class="style1"> </td> </tr> <tr> <th scope="row"> </th> <td> </td> <td class="style1"> </td> </tr> <tr> <th scope="row">City:</th> <td> <input type='text' name='ciudad' id='ciudad' onfocus="javascript:this.value=''" class='ui-widget' /> <button onclick='agregarCiudad();' id='add' style='width: 144px'>Add City</button> </td> <td align="center" class="style1"><a class='inline' href="#inline_content" style="text-decoration:none; font-weight:bold; font-size:18px;"><input type="button" value="+" id="more" disabled="disabled" ></a> <!-- This contains the hidden content for inline calls --> <div style='display:none'> <div id='inline_content' style='padding:10px; background:#fff;'> <center> <form action="addCity.php" id="add" name="addCity" method="post"> <table> <tr> <td>Selected City:</td> <td><input type="text" id="city" readonly="readonly" style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:bold; color:#F00; font-size:16px;" /></td> </tr> <tr> <td>Arrival Date: <br/> <input type="text" id="datepicker_value" name="arrival" readonly="readonly"/> </td> <td><div id="datepicker"></div></td><td></td> </tr> <tr> <td>Departure Date: <br/> <input type="text" id="otrodatepicker_value" name="departure" readonly="readonly" /> </td> <td><div id="otrodatepicker"></div></td><td></td> </tr> <tr> <tr> <td>Comment:</td> <td><input type="textarea" id="comment" name="comment" style="width:300px; height:200px;" /></td> </tr> <tr> <td>Adjuntar una Foto</td> <td><input type="file" name="fotos" /></td> </tr> <tr> <td></td> <td align="center" class="style1"><input type="button" value="Save City" id="savecity" onclick="save()" disabled="disabled" /></td> </tr> </table> </center> </div> </div> </td> </tr> <tr> <th scope="row"> </th> <td><div id="map_canvas" style="width: 600px; height: 400px"></div> </td> <td class="style1"> </td> </tr> <tr> <th scope="row">Latitud:</th> <td><span id="lat" name="lat" style="width:586px;padding-left:10px; font-size:12px; font-family:Verdana, Geneva, sans-serif;" /></span></td> <td></td> </tr> <tr> <th scope="row">Longitud:</th> <td><span id="long" name="long" style="width:586px; padding-left:10px; font-size:12px; font-family:Verdana, Geneva, sans-serif;"/></span></td> </form> <td align="center" class="style1"> </td> </tr> <tr> <th scope="row"> </th> <td> </td> <td class="style1"> </td> </tr> <tr> <th scope="row"> </th> <td> </td> <td class="style1"> </td> </tr> </table> </center> <script type="text/javascript"> function agregarCiudad() { showAddress(document.getElementById('ciudad').value); document.getElementById('city').value = document.getElementById('ciudad').value; return activar(); } </script> <script type="text/javascript"> //variables y objetos globales var map //mapa var geocoder; //geocoder var _path = []; // ruta var _poliLinea = new google.maps.Polyline({ //polilinea path: _path, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); //inicializo initialize(); function initialize() { //centrado var myLatLng = new google.maps.LatLng(37.4419, -122.1419); //opciones var mapOptions = { zoom: 1, center: myLatLng, mapTypeId: google.maps.MapTypeId.HYBRID }; //geocoder geocoder = new google.maps.Geocoder(); //creo mapa map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //asigno polilinea al mapa _poliLinea.setMap(map); } function showAddress(s_address) { var address = s_address; //busco la direccion dada geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { document.getElementById('lat').innerHTML = results[0].geometry.location.lat().toFixed(6); document.getElementById('long').innerHTML = results[0].geometry.location.lng().toFixed(6); //centro el mapa en el resultado map.setCenter(results[0].geometry.location); //creo marcador var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); //agrego punto a la linea agregarRuta(results[0].geometry.location) } else { alert('Error: ' + status); } }); } function agregarRuta(o_punto) { //creo punto a partir de la direcci��n dada var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya) //agrego el punto al array de la ruta _path.push(o_LL); //cargo la nueva ruta en la polilinea _poliLinea.setPath(_path); //centro el mapa en el ��ltimo punto map.setCenter(o_LL); //Hago un poco de zoom map.setZoom(6); } </script> </body> </html> else { no mostrar este form porque no ha creado un circuito } ?>