noviembre | 2012 | CursoProgramador

Archivo

Archive for noviembre 2012

Ejercicio web completa

15 de noviembre de 2012 cursoprogramador Deja un comentario

Intentaremos hacer una web parecida a la siguiente:

Puedes utilizar el siguiente esqueleto:

<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="pagina.css"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
         <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript" src="mimapa.js"></script>
        <!-- La anterior línea la sustituiríamos por un include de PHP
            si los mapas de Google Maps API 3 van a leer de MySQL -->        
    </head>
    <body>  <!-- Si utilizamos Google Maps hay que poner onload="inicializar() dentro de la etiqueta body"-->
        <div id="principal">
            <div id="banner">
                <?php
                include ("banner.inc");
                ?>
            </div>
            <div id="menu">
                <?php
                include("menu.inc");
                ?>
            </div>
            <div id="content">
                <div id="contenido">
                    <?php
                    include("paginaprincipal.php");
                    ?>
                </div>
                <div id="mapa">
                    <?php
                    include("mapaderecha.php");
                    ?>
                </div>
            </div>
            <div id="pie">
                <?php
                include("pie.inc");
                ?>
            </div>            
        </div>        
    </body>
</html>

Continuamos desarrollando. Para ver como va quedando todo, creamos un fichero de CSS que nos muestre el aspecto de las capas, luego cambiaremos los colores:

PAGINA.CSS

*{
    margin-top:0px;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:0px;
}
body {
    text-align:center;
    margin: 0 auto;
    padding:0px;
    background: #999999;
}
#principal{
    text-align:left;
    margin: 0 auto;
    padding:0px;
    background: white;
    width: 850px;
}
#banner{
    background: url('imagenes/desert.jpg')  orange;
    height: 150px;
}
#menu{
    background: green;
}
#content{
    width:100%;
    float:left;
    min-height: 500px;
    background:white;
}
#contenido{
    background: blue;
    width:650px;
    float:left;
    min-height: 500px;
}
#mapa{
    background: yellow;
    width:200px;
    float:right;
}
#pie{
    background: red;
}


/* ***************** CSS PARA MAPA DE CONTACTOS ************************ */
#map_canvas{
    margin: 0 auto;
    padding: 0 auto;
    width:200px;
    height:400px;
}
#mapa h1{
    color:red;
    font-size: 18px;
    text-align: center;
}

Esquema del sitio

MENU.INC

<ul>
<li><a href=»#»>Nuevo contacto</a></li>
<li><a href=»paginalistado.php»>Listado</a></li>
<li><a href=»#»>Borrar</a></li>
<li><a href=»#»>Búsqueda</a></li>
</ul>

PAGINAPRINCIPAL.PHP

<h1>Contenido principal</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi
 ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu fugiat
   nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.

BANNER.INC

&nbsp;
<h1>Mi página personal</h1>

PIE.INC

<ul>
    <li><a href="#">Contacto</a></li>
    <li><a href="#">Como llegar</a></li>
    <li><a href="#">Copy right</a></li>
    
</ul>

MAPADERECHA.PHP

<h1>Mapa de mis contactos</h1>
<div id="map_canvas">&nbsp;</div>

MAPA.INC

<script type="text/javascript">
    function inicializar(){        
        var ventana;
        var latitudlongitud = new google.maps.LatLng(37.206167,-3.614254);
        var opciones = {
            zoom: 12,
            center: latitudlongitud,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapa = new google.maps.Map(document.getElementById("map_canvas"),opciones);
        
        <?php
        // Conecta con BD y ejecutar consulta
            // Conectar con el Servidor
    $link = mysql_connect("localhost", "root", "acrear2012") or die ("No puedo conectarme con el servidor");
    // Usar la BD
    mysql_select_db("agenda",$link) or die ("No puedo abrir la BD");
    // Hacer la consulta
    $consulta= "SELECT * FROM agenda"; // Consulta por defecto
    $resultado = mysql_query($consulta, $link) or die ("No puedo ejecutar la consulta");
    // Voy leyendo fila a fila
    while ($fila = mysql_fetch_array($resultado)){
        $latitud=$fila['X'];
        $longitud=$fila['Y'];
        $id=$fila['id'];
        $nombrecompleto= $fila['nombre'].' '.$fila['apellido1'].' '.$fila['apellido2'];
        $direccion=$fila['direccion'];
        $provincia=$fila['provincia'];
        $telefono=$fila['telefono'];
        $correo=$fila['email'];
        $fecha=$fila['fechanacimiento'];   
  echo "var coordenadas = new google.maps.LatLng($latitud,$longitud);
        var marcador$id = new google.maps.Marker({
            position: coordenadas,
            map: mapa,
            title: '$nombrecompleto',
            icon: 'imagenes/statue-2.png'
        });
        var cadena$id='<div>'
        +'<h1>$nombrecompleto</h1>'
        +'<p>$direccion ($provincia)</p>'
        +'<p>Teléfono: $telefono</p>'
        +'<p>email: $correo</p>'
        +'<p>Fecha de nacimiento: $fecha</p>'
        +'<p><img src=\"imagenes/pepito.jpg\" alt=\"foto de pepito\" width=50px/></p>'
        +'</div>';
        google.maps.event.addListener(marcador$id, 'click', function() {
          if (ventana) ventana.close();
          ventana = new google.maps.InfoWindow({content: cadena$id});
          ventana.open(mapa,marcador$id);          
        }); 
        ";
    }
    mysql_close($link);
?>
            
        }
    
    
</script>

PAGINALISTADO.PHP

<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="pagina.css"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
         <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
         <?php
             include("mapa.inc");
         ?>
        <!-- <script type="text/javascript" src="mimapa.js"></script>
        La anterior línea la sustituiríamos por un include de PHP
            si los mapas de Google Maps API 3 van a leer de MySQL -->        
    </head>
    <body onload="inicializar()">  <!-- Si utilizamos Google Maps hay que poner onload="inicializar() dentro de la etiqueta body"-->
        <div id="principal">
            <div id="banner">
                <?php
                include ("banner.inc");
                ?>
            </div>
            <div id="menu">
                <?php
                include("menu.inc");
                ?>
            </div>
            <div id="content">
                <div id="contenido">
                    <?php
                    include("provincia.inc");
                    ?>
                </div>
                <div id="mapa">
                    <?php
                    include("mapaderecha.php");
                    ?>
                </div>
            </div>
            <div id="pie">
                <?php
                include("pie.inc");
                ?>
            </div>            
        </div>        
    </body>
</html>

PROVINCIA.INC

<h1>Todos mis contactos</h1>
<form name=»formulario» action=»paginalistado.php» method=»get»>
Mostrar contactos por provincia:
<select name=»prov» onchange=’actualizaPagina()’>

<?php
if (!isset($_GET[‘prov’])){ // Si yo he escrito listadoporprovincia.php sin parámetros
echo «<option value=’Todas’ selected>Todas</option>»;
}
elseif ($_GET[‘prov’]==»Todas»){
echo «<option value=’Todas’ selected>Todas</option>»;
}
else{
echo «<option value=’Todas’>Todas</option>»;
}

// Conectar con el Servidor
$link = mysql_connect(«localhost», «root», «acrear2012»)
or die («No puedo conectarme con el servidor»);
// Usar la BD
mysql_select_db(«agenda»,$link)
or die («No puedo abrir la BD»);
// Hacer la consulta
$consulta= «SELECT provincia FROM agenda GROUP BY provincia»;
$resultado = mysql_query($consulta, $link)
or die («No puedo ejecutar la consulta»);
// Voy leyendo fila a fila

while ($fila = mysql_fetch_array($resultado)){
echo «<option value='».$fila[‘provincia’].»‘»;
if (isset($_GET[‘prov’]))
if ($_GET[‘prov’]==$fila[‘provincia’])
echo » selected»;
echo «>».$fila[‘provincia’].»</option>\n»;
}
mysql_close($link);
?>
</select>

</form>
<table>
<tr>
<th>NOMBRE</th><th>DIRECCIÓN</th><th>TELÉFONO</th><th>EMAIL</th><th>PROVINCIA</th>
</tr>
<?php
// Conectar con el Servidor
$link = mysql_connect(«localhost», «root», «acrear2012»)
or die («No puedo conectarme con el servidor»);
// Usar la BD
mysql_select_db(«agenda»,$link)
or die («No puedo abrir la BD»);
// Hacer la consulta

if (!isset($_GET[‘prov’]))
$consulta= «SELECT * FROM agenda»;
elseif ($_GET[‘prov’]==»Todas»)
$consulta= «SELECT * FROM agenda»;
else
$consulta=»SELECT * FROM agenda WHERE provincia='».$_GET[‘prov’].»‘»;

$resultado = mysql_query($consulta, $link)
or die («No puedo ejecutar la consulta»);
// Voy leyendo fila a fila
$i=0;
while ($fila = mysql_fetch_array($resultado)){
if ($i%2==0){
echo «<tr>»;
}
else{
echo «<tr id=’naranja’>»;
}
$i++;
// Celda del Nombre completo = Nombre + Apellido1 + Apellido2
echo «<td>».$fila[‘nombre’].» «.$fila[‘apellido1’].» «.$fila[‘apellido2’].»</td>»;
// Celda de la dirección
echo «<td>».$fila[‘direccion’].»</td>»;
// Celda del teléfono
echo «<td>».$fila[‘telefono’].»</td>»;
// Celda del email
echo «<td>».$fila[‘email’].»</td>»;
echo «<td>».$fila[‘provincia’].»</td>»;
echo «</tr>\n»;
}
mysql_close($link); // Cerrar la conexión

?>
</table>

…

Categorías: Desarrollo web Etiquetas: banner, capas, completa, contenido, content, css, div, ejercicio, google maps, google maps api, include, menu, MySQL, página web, php, sitio web

Insertar contacto en Agenda con Google Maps

13 de noviembre de 2012 cursoprogramador Deja un comentario

En este caso queremos hacer un formulario que permita la alta de mis contactos en BD añadiendo un mapa en el que podamos localizar al contacto.

Capturará el evento de clic sobre el mapa para generar el marcador.

Capturará la posición del clic para mostrarlo en los input type=text X e Y.

Haremos «draggable» el marcador para poder moverlo de un sitio a otro. La posición en X e Y se irá modificando.

Imagen del Formulario:

Fichero HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="agenda.css">
        <title>Insertar nuevo contacto</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
         <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
        </script>
            <script type="text/javascript">
            function inicializar(){
            var mapa;
            var marcador;
            var myLatlng = new google.maps.LatLng(37.192869,-3.613186);
            var mapOptions = {
                  zoom: 10,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            mapa = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);    

            google.maps.event.addListener(mapa, 'click', function(event) {
                   // Crear marcador
                   if (marcador) marcador.setMap(null);                   
                   marcador = new google.maps.Marker({
                   position: event.latLng,
                   draggable: true, 
                   map: mapa
                });
                mapa.setCenter(event.latLng);
                 // Rellenar X e Y
                document.formulario.latitud.value=event.latLng.lat();
                document.formulario.longitud.value=event.latLng.lng();

                // Modificar X e Y al mover
                google.maps.event.addListener(marcador,'drag',function(event){
                    document.formulario.latitud.value=event.latLng.lat();
                    document.formulario.longitud.value=event.latLng.lng();
                    mapa.setCenter(event.latLng);
                });

            });

            }
            </script>
    </head>
    <body onload="inicializar()">
        <h1>Alta de Contacto:</h1>
        <form action="insertaragendamapa.php" method="post" name="formulario">
            <div style="float:right">X: <input type="text" name="latitud"/> 
            Y: <input type="text" name="longitud"/><br/><br/>
            <div id="map_canvas" style="width:500px;height:500px">&nbsp;</div>
            </div>Nombre: <input type="text" name="nombre"/><br/><br/>
            Apellidos: <input type="text" name="ap1"/> &nbsp;
            <input type="text" name="ap2"/><br/><br/>
            Teléfono: <input type="text" name="telefono"/><br/><br/>
            e-mail: <input type="text" name="email"/><br/><br/>
            Dirección: <input type="text" name="direccion"/><br/><br/>
            Provincia: <input type="text" name="provincia"/><br/><br/>
            Fecha de Nacimiento: <input type="text" name="fecha"/><br/><br/>

            <br/><br/>
            <input type="submit" value="Guardar"/>
            <input type="reset" value="Limpiar"/>
        </form>

    </body>
</html>

Fichero PHP

<html>
<body>

<?php

$nombre=$_POST['nombre'];
$ap1=$_POST['ap1'];
$ap2=$_POST['ap2'];
$direccion = $_POST['direccion'];
$email=$_POST['email'];
$fecha=$_POST['fecha'];
$telefono=$_POST['telefono'];
$provincia=$_POST['provincia'];
$latitud=$_POST['latitud'];
$longitud=$_POST['longitud'];

//Transformo fecha de DD-MM-YYYY a YYYY-MM-DD
$fecha = date_create_from_format('d-m-Y', $fecha);
$fechanueva = date_format($fecha, 'Y-m-d');

$link = mysql_connect("localhost", "root", "acrear2012");
mysql_select_db("agenda",$link);
$sql = "INSERT INTO agenda (nombre, apellido1, apellido2, direccion,
 telefono, email, fechanacimiento, provincia, X, Y) ".
  "VALUES ('$nombre', '$ap1', '$ap2', '$direccion', '$telefono', '$email',
   '$fechanueva','$provincia',$latitud,$longitud)";

$result = mysql_query($sql,$link) or die("No he podido insertar el contacto");
echo "<p>El contacto $nombre $ap1 $ap2 ha sido insertado.</p>\n";

?>
</body>
</html>

Mejora en el formulario mediante GeoCoder

Para conseguir que sitúe un marcador a partir de la dirección escrita, programamos el evento onchange del campo Dirección.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="agenda.css">
        <title>Insertar nuevo contacto</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
         <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
        </script>
            <script type="text/javascript">
            var mapa;
            var marcador;
            var geocoder;            

            function inicializar(){    
            geocoder = new google.maps.Geocoder();        
            var myLatlng = new google.maps.LatLng(37.192869,-3.613186);
            var mapOptions = {
                  zoom: 10,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            mapa = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);    

            google.maps.event.addListener(mapa, 'click', function (event){
                creaMarcador(event.latLng)
                });

            }

            function creaMarcador(localizacion){                
                // Crear marcador
                   if (marcador) marcador.setMap(null);                   
                   marcador = new google.maps.Marker({
                   position: localizacion,
                   draggable: true, 
                   map: mapa
                });
                mapa.setCenter(localizacion);
                 // Rellenar X e Y
                document.formulario.latitud.value=localizacion.lat();
                document.formulario.longitud.value=localizacion.lng();

                // Modificar X e Y al mover
                google.maps.event.addListener(marcador,'drag',function(event){
                    document.formulario.latitud.value=event.latLng.lat();
                    document.formulario.longitud.value=event.latLng.lng();
                    //mapa.setCenter(localizacion);
                });

            }

            function direc(){            
            var dire = document.getElementById("direccion").value;            
              geocoder.geocode( {'address': dire}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                  mapa.setCenter(results[0].geometry.location);
                  creaMarcador(results[0].geometry.location);
              }
             else {
                  alert("Geocode was not successful for the following reason: " + status);
            }                
            });

            }
            </script>
    </head>
    <body onload="inicializar()">
        <h1>Alta de Contacto:</h1>
        <form action="insertaragendamapa.php" method="post" name="formulario">
            <div style="float:right">X: <input type="text" name="latitud"/> 
            Y: <input type="text" name="longitud"/><br/><br/>
            <div id="map_canvas" style="width:500px;height:500px">&nbsp;</div>
            </div>Nombre: <input type="text" name="nombre"/><br/><br/>
            Apellidos: <input type="text" name="ap1"/> &nbsp;
            <input type="text" name="ap2"/><br/><br/>
            Teléfono: <input type="text" name="telefono"/><br/><br/>
            e-mail: <input type="text" name="email"/><br/><br/>
            Dirección: <input type="text" id="direccion" name="direccion" onchange="direc()"/> 
            <!--<input type="button" name="boton" value="Busca" onclick="direc()"/>--><br/><br/>
            Provincia: <input type="text" name="provincia"/><br/><br/>
            Fecha de Nacimiento: <input type="text" name="fecha"/><br/><br/>

            <br/><br/>
            <input type="submit" value="Guardar"/>
            <input type="reset" value="Limpiar"/>
        </form>

    </body>
</html>

…

Categorías: Desarrollo web Etiquetas: agenda, dirección, geoCode, geoCoder, google maps, google maps api 3, javascript

Nuestros contactos en Google Maps

13 de noviembre de 2012 cursoprogramador 1 comentario

<!DOCTYPE html>
<html>
 <head>
    <style type="text/css">
        body{
            text-align:center;
            margin: 0 auto;
            padding: 0 auto;
        }
        #map_canvas{
            margin: 0 auto;
            padding: 0 auto;
            width:700px;
            height:400px;
            /*background:blue;*/
            text-align:left;
        }
    </style>
    <title>Mapa de mis contactos</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function inicializar(){
        var ventana;
        var latitudlongitud = new google.maps.LatLng(37.206167,-3.654254);
        var opciones = {
            zoom: 10,
            center: latitudlongitud,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapa = new google.maps.Map(document.getElementById("map_canvas"),opciones);

        var coordenadas = new google.maps.LatLng(37.195604,-3.609191);
        var marcador = new google.maps.Marker({
            position: coordenadas,
            map: mapa,
            title: 'Jorgito Ruiz López',
            icon: 'imagenes/statue-2.png'
        });
        var cadena='<div>'
        +'<h1>Jorgito Ruiz López</h1>'
        +'<p>Calle Almuñecar 4 (Granada)</p>'
        +'<p>Teléfono: 666000111</p>'
        +'<p>email: jorgito@gmail.com</p>'
        +'<p>Fecha de nacimiento: 1965-02-03</p>'
        +'</div>';
        google.maps.event.addListener(marcador, 'click', function() {
          if (ventana) ventana.close();
          ventana = new google.maps.InfoWindow({content: cadena});
          ventana.open(mapa,marcador);          
        }); 

        }        
    </script>    

 </head>
 <body onload="inicializar()">
    <h1>Mapa de mis contactos</h1>
    <div id="map_canvas">&nbsp;</div>

 </body>
</html>

…

El siguiente código consulta la BD y muestra un punto por cada contacto:

<!DOCTYPE html>
<html>
 <head>
    <style type="text/css">
        body{
            text-align:center;
            margin: 0 auto;
            padding: 0 auto;
        }
        #map_canvas{
            margin: 0 auto;
            padding: 0 auto;
            width:700px;
            height:400px;
            /*background:blue;*/
            text-align:left;
        }
    </style>
    <title>Mapa de mis contactos</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function inicializar(){
        var ventana;
        var latitudlongitud = new google.maps.LatLng(37.206167,-3.644254);
        var opciones = {
            zoom: 12,
            center: latitudlongitud,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapa = new google.maps.Map(document.getElementById("map_canvas"),opciones);

        <?php
        // Conecta con BD y ejecutar consulta
            // Conectar con el Servidor
    $link = mysql_connect("localhost", "root", "acrear2012") or die ("No puedo conectarme con el servidor");
    // Usar la BD
    mysql_select_db("agenda",$link) or die ("No puedo abrir la BD");
    // Hacer la consulta
    $consulta= "SELECT * FROM agenda"; // Consulta por defecto
    $resultado = mysql_query($consulta, $link) or die ("No puedo ejecutar la consulta");
    // Voy leyendo fila a fila
    while ($fila = mysql_fetch_array($resultado)){
        $latitud=$fila['X'];
        $longitud=$fila['Y'];
        $id=$fila['id'];   
  echo "var coordenadas = new google.maps.LatLng($latitud,$longitud);
        var marcador$id = new google.maps.Marker({
            position: coordenadas,
            map: mapa,
            title: 'Jorgito Ruiz López',
            icon: 'imagenes/statue-2.png'
        });
        var cadena='<div>'
        +'<h1>Jorgito Ruiz López</h1>'
        +'<p>Calle Almuñecar 4 (Granada)</p>'
        +'<p>Teléfono: 666000111</p>'
        +'<p>email: jorgito@gmail.com</p>'
        +'<p>Fecha de nacimiento: 1965-02-03</p>'
        +'</div>';
        google.maps.event.addListener(marcador$id, 'click', function() {
          if (ventana) ventana.close();
          ventana = new google.maps.InfoWindow({content: cadena});
          ventana.open(mapa,marcador$id);          
        }); 
        ";
    }
    mysql_close($link);
?>

        }        
    </script>    

 </head>
 <body onload="inicializar()">
    <h1>Mapa de mis contactos</h1>
    <div id="map_canvas">&nbsp;</div>

 </body>
</html>

Y el código definitivo es:

<!DOCTYPE html>
<html>
 <head>
    <style type="text/css">
        body{
            text-align:center;
            margin: 0 auto;
            padding: 0 auto;
        }
        #map_canvas{
            margin: 0 auto;
            padding: 0 auto;
            width:700px;
            height:400px;
            /*background:blue;*/
            text-align:left;
        }
    </style>
    <title>Mapa de mis contactos</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function inicializar(){
        var ventana;
        var latitudlongitud = new google.maps.LatLng(37.206167,-3.644254);
        var opciones = {
            zoom: 12,
            center: latitudlongitud,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapa = new google.maps.Map(document.getElementById("map_canvas"),opciones);
        
        <?php
        // Conecta con BD y ejecutar consulta
            // Conectar con el Servidor
    $link = mysql_connect("localhost", "root", "acrear2012") or die ("No puedo conectarme con el servidor");
    // Usar la BD
    mysql_select_db("agenda",$link) or die ("No puedo abrir la BD");
    // Hacer la consulta
    $consulta= "SELECT * FROM agenda"; // Consulta por defecto
    $resultado = mysql_query($consulta, $link) or die ("No puedo ejecutar la consulta");
    // Voy leyendo fila a fila
    while ($fila = mysql_fetch_array($resultado)){
        $latitud=$fila['X'];
        $longitud=$fila['Y'];
        $id=$fila['id'];
        $nombrecompleto= $fila['nombre'].' '.$fila['apellido1'].' '.$fila['apellido2'];
        $direccion=$fila['direccion'];
        $provincia=$fila['provincia'];
        $telefono=$fila['telefono'];
        $correo=$fila['email'];
        $fecha=$fila['fechanacimiento'];   
  echo "var coordenadas = new google.maps.LatLng($latitud,$longitud);
        var marcador$id = new google.maps.Marker({
            position: coordenadas,
            map: mapa,
            title: '$nombrecompleto',
            icon: 'imagenes/statue-2.png'
        });
        var cadena$id='<div>'
        +'<h1>$nombrecompleto</h1>'
        +'<p>$direccion ($provincia)</p>'
        +'<p>Teléfono: $telefono</p>'
        +'<p>email: $correo</p>'
        +'<p>Fecha de nacimiento: $fecha</p>'
        +'<p><img src=\"imagenes/pepito.jpg\" alt=\"foto de pepito\" width=50px/></p>'
        +'</div>';
        google.maps.event.addListener(marcador$id, 'click', function() {
          if (ventana) ventana.close();
          ventana = new google.maps.InfoWindow({content: cadena$id});
          ventana.open(mapa,marcador$id);          
        }); 
        ";
    }
    mysql_close($link);
?>
            
        }        
    </script>    
        
        
 </head>
 <body onload="inicializar()">
    <h1>Mapa de mis contactos</h1>
    <div id="map_canvas">&nbsp;</div>
        
 </body>
</html>

…

Categorías: Desarrollo web Etiquetas: google maps, google maps api 3, infowindow, javascript, marker, MySQL, php

Ejemplo mapa con 3 marcadores

13 de noviembre de 2012 cursoprogramador Deja un comentario

Código del segundo mapa que hacemos. Ejemplo básico. Tenemos 3 marcadores situados uno en Maracena, otro en Armilla y otro en Granada.

Código fuente:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Mapa en Granada</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      function initialize() {
        var myLatlng = new google.maps.LatLng(37.192869,-3.613186);
        var mapOptions = {
          zoom: 10,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentString = '<div>'
         +'<h1>Maracena</h1>'
         +'<p>Localidad: Maracena. 20000 habitantes</p>'
         +'</div>';
         
        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        var myLatlng = new google.maps.LatLng(37.209277,-3.636875);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Maracena',
            icon: 'imagenes/arch.png'
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        
        
        // Segundo marcador
        var contentString2 = '<div>'
         +'<h1>Armilla</h1>'
         +'<p>Localidad: Armilla. 23000 habitantes</p>'
         +'</div>';
         
        var infowindow2 = new google.maps.InfoWindow({
            content: contentString2,
            maxWidth: 300
        });
        var myLatlng = new google.maps.LatLng(37.141435,-3.620739);
        var marker2 = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Armilla',
            icon: 'imagenes/statue-2.png'
        });
        google.maps.event.addListener(marker2, 'click', function() {
          infowindow2.open(map,marker2);
        });        
        // Tercer marcador
        var contenidoGranada = '<div>'
         +'<h1>Granada</h1>'
         +'<p>Localidad: Granada. 250000 habitantes</p>'
         +'</div>';
         
        var ventanaGranada = new google.maps.InfoWindow({
            content: contenidoGranada,
            maxWidth: 300
        });
        var latitudGranada = new google.maps.LatLng(37.180561,-3.602886);
        var marcadorGranada = new google.maps.Marker({
            position: latitudGranada,
            map: map,
            title: 'Granada',
            icon: 'imagenes/rockhouse.png'
        });
        google.maps.event.addListener(marcadorGranada, 'click', function() {
          ventanaGranada.open(map,marcadorGranada);
        });
        
      }

    </script>
  </head>
  <body onload="initialize()">
      <h1>Mapa en Granada</h1>
    <div id="map_canvas" style="width:500px;height:500px"></div>
    <h2>Tres puntos distintos</h2>
  </body>
</html>

Categorías: Desarrollo web Etiquetas: google maps, google maps api 3, infowindow, marker

Mostrar una única InfoWindow en Google Maps

13 de noviembre de 2012 cursoprogramador Deja un comentario

Para no obtener varios InfoWindow en un mapa, como sucede en la siguiente imagen:

El secreto es utilizar una única variable InfoWindow.

Esta variable, en el Listener de cada Marker, la comprobaremos si existe. Si es así la cerramos, si no, creamos un nuevo objeto con el content correcto y lo asignamos al marcador actual.

El código fuente sería el siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Mapa en Granada</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      function initialize() {
        var myLatlng = new google.maps.LatLng(37.192869,-3.613186);
        var infowindow;
        var mapOptions = {
          zoom: 10,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var contentString = '<div>'
         +'<h1>Maracena</h1>'
         +'<p>Localidad: Maracena. 20000 habitantes</p>'
         +'</div>';

        var myLatlng = new google.maps.LatLng(37.209277,-3.636875);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Maracena',
            icon: 'imagenes/arch.png'
        });
        google.maps.event.addListener(marker, 'click', function() {
          if (infowindow) infowindow.close();
          infowindow = new google.maps.InfoWindow({content: contentString});
          infowindow.open(map,marker);
        });

        // Segundo marcador
        var contentString2 = '<div>'
         +'<h1>Armilla</h1>'
         +'<p>Localidad: Armilla. 23000 habitantes</p>'
         +'</div>';

        var myLatlng = new google.maps.LatLng(37.141435,-3.620739);
        var marker2 = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Armilla',
            icon: 'imagenes/statue-2.png'
        });
        google.maps.event.addListener(marker2, 'click', function() {
          if (infowindow) infowindow.close();
          infowindow = new google.maps.InfoWindow({content: contentString2});
          infowindow.open(map,marker2);

        });        
        // Tercer marcador
        var contenidoGranada = '<div>'
         +'<h1>Granada</h1>'
         +'<p>Localidad: Granada. 250000 habitantes</p>'
         +'</div>';

        var ventanaGranada = new google.maps.InfoWindow({
            content: contenidoGranada,
            maxWidth: 300
        });
        var latitudGranada = new google.maps.LatLng(37.180561,-3.602886);
        var marcadorGranada = new google.maps.Marker({
            position: latitudGranada,
            map: map,
            title: 'Granada',
            icon: 'imagenes/rockhouse.png'
        });
        google.maps.event.addListener(marcadorGranada, 'click', function() {
          if (infowindow) infowindow.close();
          infowindow = new google.maps.InfoWindow({content: contenidoGranada});
          infowindow.open(map,marcadorGranada);
        });

      }

    </script>
  </head>
  <body onload="initialize()">
      <h1>Mapa en Granada</h1>
    <div id="map_canvas" style="width:500px;height:500px"></div>
    <h2>Tres puntos distintos</h2>
  </body>
</html>

…

Categorías: Desarrollo web Etiquetas: close, google maps, google maps api 3, infowindow, javascript, marker

Google chart generado desde PHP

8 de noviembre de 2012 cursoprogramador 1 comentario

// Carga el API de Visualizacion y el paquete del gráfico de quesitos
google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]});

// Cuando la API de Visualización de Google está cargada llama a la función dibujaGrafico.
google.setOnLoadCallback(dibujaGrafico);

// Llama a la función que crea y rellena la tabla,
// crea el gráfico de quesitos, la pasa los datos y
// lo dibuja.
function dibujaGrafico() {

// Crea la tabla de datos.
var datos = new google.visualization.DataTable();
datos.addColumn(‘string’, ‘Provincia’);
datos.addColumn(‘number’, ‘Número de contactos’);
datos.addRows([
<?php
// Conectar con el Servidor
$link = mysql_connect(«localhost», «root», «acrear2012»)
or die («No puedo conectarme con el servidor»);
// Usar la BD
mysql_select_db(«agenda»,$link)
or die («No puedo abrir la BD»);

$consulta= «SELECT count(*) as numero, provincia FROM agenda GROUP BY provincia»;
$resultado = mysql_query($consulta, $link)
or die («No puedo ejecutar la consulta»);
$numerodefilas=mysql_num_rows($resultado);
$i=0;
while ($fila = mysql_fetch_array($resultado)){
$i++;
if ($i<$numerodefilas){ // No es la última fila
echo «[‘».$fila[‘provincia’].»‘, «.$fila[‘numero’].»],\n»;
}else{ // Sí es la última fila
echo «[‘».$fila[‘provincia’].»‘, «.$fila[‘numero’].»]\n»;
}
}
mysql_close($link);
?>
]);

// Opciones del gráfico
var opciones = {‘title’:’Provincias’,
‘width’:400,
‘height’:300};

// Crea y dibuja el gráfico, pasando algunas opciones.
var grafico = new google.visualization.PieChart(document.getElementById(‘capaGrafico’));
grafico.draw(datos, opciones);
}
</script>
</head>
<body>

<h1>Contactos por provincia</h1>
<!– Capa que contiene el gráfico –>
<div id=»capaGrafico»></div>

</body>
</html>

…

Categorías: Desarrollo web Etiquetas: ajax, google chart, gráfico, javascript, MySQL, php, piechart

Ejemplo de analizador XML

7 de noviembre de 2012 cursoprogramador Deja un comentario

Creamos un fichero de ejemplo XML:

<?xml version="1.0" encoding="UTF-8" ?>
<agenda>
    <contacto>
        <nombre>Luis</nombre>
        <apellido1>García</apellido1>
        <apellido2>García</apellido2>
        <direccion>Santa Petra 14</direccion>
        <telefono>958225522</telefono>
        <email>luis@granada.org</email>
        <fechanacimiento>1945-02-21</fechanacimiento>
        <provincia>Granada</provincia>
    </contacto>
    <contacto>
        <nombre>Luisa</nombre>
        <apellido1>García</apellido1>
        <apellido2>Rodríguez</apellido2>
        <direccion>San Juan 12</direccion>
        <telefono>958262626</telefono>
        <email>luisa@granada.es</email>
        <fechanacimiento>1955-02-22</fechanacimiento>
        <provincia>Granada</provincia>
    </contacto>
    <contacto>
        <nombre>Josefa</nombre>
        <apellido1>Sanz</apellido1>
        <apellido2>Gómez</apellido2>
        <direccion>Antonio Machado 19</direccion>
        <telefono>953646464</telefono>
        <email>pepi@jaen.es</email>
        <fechanacimiento>1965-05-05</fechanacimiento>
        <provincia>Jaén</provincia>
    </contacto>
    <contacto>
        <nombre>Antonia</nombre>
        <apellido1>González</apellido1>
        <apellido2>Sanz</apellido2>
        <direccion>Miguel Hernández 19</direccion>
        <telefono>950262626</telefono>
        <email>antonia@almeria.com</email>
        <fechanacimiento>1975-05-05</fechanacimiento>
        <provincia>Almería</provincia>
    </contacto>        
</agenda>

En el navegador aparecerá de la siguiente manera.

<html> 
    <head></head>
    <body>
<table>    
    <tr>
        <th>Nombre</th>
        <th>Primer Apellido</th>
        <th>Segundo Apellido</th>
        <th>Dirección</th>
        <th>Teléfono</th>
        <th>E-mail</th>
        <th>Fecha de nacimiento</th>
        <th>Provincia</th>
    </tr>    
<?php
  $agenda = simplexml_load_file("agenda.xml")
              or die ("No he podido abrir correctamente el fichero");

    // Conectar con el Servidor
    $link = mysql_connect("localhost", "root", "acrear2012")
            or die ("No puedo conectarme con el servidor");
    // Usar la BD
    mysql_select_db("agenda",$link)
                or die ("No puedo abrir la BD");
                
            
  foreach ($agenda->contacto as $result){
      echo "<tr>";      
    echo "<td>";echo $result->nombre;echo "</td>";
    echo "<td>";echo $result->apellido1;echo "</td>";
    echo "<td>";echo $result->apellido2;echo "</td>";
    echo "<td>";echo $result->direccion;echo "</td>";
    echo "<td>";echo $result->telefono;echo "</td>";
    echo "<td>";echo $result->email;echo "</td>";
    echo "<td>";echo $result->fechanacimiento;echo "</td>";
    echo "<td>";echo $result->provincia;echo "</td>";
    echo "</tr>";
    $consulta="INSERT INTO agenda (nombre, apellido1, apellido2, direccion,
                telefono, email, fechanacimiento, provincia)
                VALUES (
                '".$result->nombre."',
                '".$result->apellido1."',
                '".$result->apellido2."',
                '".$result->direccion."',
                '".$result->telefono."',
                '".$result->email."',
                '".$result->fechanacimiento."',
                '".$result->provincia."'
                )";
    $resultado=mysql_query($consulta, $link) or die ("No puedo ejecutar la consulta");
    if ($resultado==false){ // No ha insertado
        
    }
  }
  mysql_close($link);  // Cerrar la conexión
  
?>
</table>        
    </body>
</html>

…

Categorías: Desarrollo web Etiquetas: analizador, MySQL, parser, php, simplexml, xml

Autenticación de acceso

6 de noviembre de 2012 cursoprogramador Deja un comentario

La cuestión es crear un script que, empleando cabeceras HTTP, implemente un mecanismo de autenticación.

Esto sólo funciona con PHP y Apache.

Consigue el envío de forma segura de los datos de usuario y contraseña desde el equipo del usuario al servidor.

Al intentar acceder a un recurso protegido, el servidor contesta enviando un mensaje en cuya cabecera se especifican el nombre de la zona protegida y un código de estado (401 – Unauthorized). Cuando el cliente recibe este mensaje, solicita al usuario su nombre de usuario y palabra clave, que son reenviadas al servidor para su autenticación. Si al tercer intento fracasa, se deniega el acceso al recurso.

<?php

 // Definimos dos constantes con el nombre de usuario y su palabra clave
 define('USUARIO', 'jefe');
 define('P_CLAVE', 'superjefe');
 
   // Comprobamos si existe el nombre de usuario y es correcto
   if (!isset($_SERVER['PHP_AUTH_USER']) || 
       ($_SERVER['PHP_AUTH_USER'] != USUARIO || $_SERVER['PHP_AUTH_PW'] != P_CLAVE))
      {
      header('WWW-Authenticate: Basic realm=" Zona Restringida "');
      header('HTTP/1.0 401 Unauthorized');
      echo 'ZONA RESTRINGIDA: se requiere autorización.';
      exit();
      }

   // Todo es correcto, le dejamos pasar...
   else
      {
      echo '<h2 align="center">Zona Restringida</h2>';
      echo 'Buenos días JEFE :)';
      }
?>

Categorías: Desarrollo web Etiquetas: autenticación, autenticar, contraseña, isset, password, php, PHP_AUTH_PW, PHP_AUTH_USER, usuario

Capas KML y GeoRSS

6 de noviembre de 2012 cursoprogramador Deja un comentario

Google Maps API admite los formatos de datos KML y GeoRSS para la visualización de información geográfica. Estos formatos de datos se muestran un mapa a través de un objeto KmlLayer, cuyo constructor toma la URL de un archivo KML o GeoRSS de acceso público.

El API de Google Maps convierte los datos geográficos proporcionados en formato XML en una representación KML que se muestra en el mapa mediante una superposición de mosaico de la versión 3. El aspecto (y, en cierto modo, el comportamiento) de la representación KML se parece al de los elementos de superposición de la versión 3. Los elementos KML <Placemark> y GeoRSS point se representan como marcadores, por ejemplo, los elementos <LineString> se representan como polilíneas y los elementos <Polygon> se representan como polígonos. Asimismo, los elementos <GroundOverlay> se representan como imágenes rectangulares en el mapa. Sin embargo, estos objetos en gran medida no son marcadores (Marker), polilíneas (Polyline), polígonos (Polygon) o superposiciones de suelo (GroundOverlay) del API de Google Maps; en su lugar, se representan en un único objeto en el mapa.

Los objetos KmlLayer aparecen en un mapa después de definir la propiedad map correspondiente. (Puedes eliminarlos del mapa ejecutando setMap() y transmitiendo null). El objeto KmlLayer administra la representación de estos elementos secundarios mediante la recuperación automática de las características apropiadas correspondientes a los límites especificados para el mapa. A medida que cambian los límites, se representan automáticamente las características de la correspondiente ventana gráfica.

Dado que los componentes de una capa KmlLayer se representan bajo demanda, la capa permite administrar fácilmente la representación de miles de marcadores, polilíneas y polígonos. Ten en cuenta que no puedes acceder a los objetos constituyentes directamente, aunque cada uno de ellos proporciona eventos de clic que devuelven datos sobre cada uno de dichos objetos.

Opciones de la capa KML

El constructor KmlLayer() transmite opcionalmente diversos valores KmlLayerOptions:

map especifica el mapa (Map) en el que se representará el valor KmlLayer. Puedes ocultar una capa KmlLayer estableciendo este valor como null en el método setMap().
preserveViewport especifica que el mapa no se debe ajustar a los límites del contenido de KmlLayer al mostrar la capa. De forma predeterminada, al mostrar un valor KmlLayer, el mapa se amplía o reduce y se posiciona para mostrar todo el contenido de la capa.
suppressInfoWindows indica que las funciones de clic de KmlLayer no provocarán la visualización de objetos InfoWindow.

Además, una vez representado el objeto KmlLayer, incluye una propiedad metadata inmutable que contiene el nombre, la descripción, el fragmento de código y el autor en un objeto literal KmlLayerMetadata. El métodogetMetadata() te permite inspeccionar esta información. Dado que la representación de objetos KmlLayer requiere una comunicación asíncrona con un servidor externo, se recomienda detectar el evento metadata_changed, que indicará que se ha completado la propiedad.

En el ejemplo siguiente se crea un objeto KmlLayer a partir del feed de GeoRSS especificado:

var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
var myOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
var georssLayer = new google.maps.KmlLayer('http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss');
georssLayer.setMap(map);

Ver ejemplo de GeoRSS (layer-georss.html)

En el ejemplo siguiente se crea un objeto KmlLayer a partir del feed de KML especificado:

var myLatlng = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
  zoom: 11,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');
ctaLayer.setMap(map);

Ver ejemplo de KML (layer-kml.html)

Detalles de recursos KML

Dado que KML puede incluir un gran número de recursos, es posible que no puedas acceder a los datos de recursos directamente desde el objeto KmlLayer. Por contra, a medida que se muestran los recursos, estos se representan de forma que parezcan superposiciones del API de Google Maps en las que se puede hacer clic. De forma predeterminada, al hacer clic en cada uno de los recursos, se muestra una ventana de información (InfoWindow) que incluye el valor <title> de KML e información del tipo <description> sobre dicho recurso. Además, al hacer clic en un recurso KML, se genera un evento KmlMouseEvent que transmite la información siguiente:

position indica las coordenadas (latitud/longitud) en las que se anclará la ventana de información (InfoWindow) de este recurso KML. Esta posición es normalmente la ubicación en la que se ha hecho clic para polígonos, polilíneas y las clases GroundOverlays, así como el origen verdadero de objetos.
pixelOffset indica la desviación desde la posición (position) anterior en la que se anclará la «cola» de InfoWindow. En el caso de los objetos poligonales, esta desviación es normalmente de 0,0, pero para los marcadores, incluye también la altura del marcador.
featureData incluye una estructura JSON de KmlFeatureData.

A continuación, se muestra un objeto KmlFeatureData de ejemplo:

{
  author: {
    email: "nobody@google.com",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

En el ejemplo siguiente, se muestra el texto <Description> del recurso KML en el lado <div> al hacer clic en el recurso:

var myLatlng = new google.maps.LatLng(40.65, -73.95);
var myOptions = {
  zoom: 12,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
var nyLayer = new google.maps.KmlLayer('http://www.searcharoo.net/SearchKml/newyork.kml',
    {suppressInfoWindows: true});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
  var text = kmlEvent.featureData.description;
  showInDiv(text);
});
  
function showInDiv(text) {
  var sidediv = document.getElementById('contentWindow');
  sidediv.innerHTML = text;
}

Ver ejemplo de KML (layer-kml-features.html)

Categorías: Desarrollo web Etiquetas: capa, georss, google maps, google maps api 3, javascript, kml

Aspectos generales de capas

6 de noviembre de 2012 cursoprogramador Deja un comentario

Las capas son objetos que se muestran sobre el mapa, que constan de uno o más elementos independientes, que sin embargo se manipulan como una sola unidad. Las capas representan normalmente conjuntos de objetos que se añaden sobre el mapa para designar una asociación común. El API de Google Maps administra la presentación de objetos dentro de las capas mediante la presentación de los elementos que las constituyen en un único objeto (normalmente una superposición de mosaico) y la visualización de los mismos a medida que cambia la ventana gráfica del mapa. Las capas también pueden modificar la capa de presentación del propio mapa, alterando ligeramente los mosaicos base en consonancia con la capa. Ten en cuenta que, por diseño, no se puede acceder a la mayoría de las capas a través de sus objetos individuales y que solo se pueden manipular como una unidad.

Para añadir una capa a un mapa, solo es necesario ejecutar setMap(), transmitiéndole el objeto del mapa en el que se mostrará la capa. De forma similar, para ocultar una capa, ejecuta setMap(), transmitiendo null.

Google Maps API incorpora varios tipos de capas:

Los objetos KmlLayer representan elementos KML y GeoRSS en una superposición de mosaico de la versión 3 del API de Google Maps.
Los objetos FusionTablesLayer representan datos incluidos en GoogleFusion Tables.
El objeto TrafficLayer representa una capa que muestra las condiciones de tráfico y superposiciones que representan el tráfico.
El objeto BicyclingLayer representa una capa de rutas para bicicletas o superposiciones específicas de bicicletas en una capa común. Esta capa se devuelve de forma predeterminada en DirectionsRenderer al solicitar indicaciones en el modo de viaje BICYCLING.

Categorías: Desarrollo web Etiquetas: capas, google maps, google maps api 3, javascript

Older Entries

Archivo

PAGINA.CSS

Esquema del sitio

MENU.INC

PAGINAPRINCIPAL.PHP

BANNER.INC

PIE.INC

MAPADERECHA.PHP

MAPA.INC

PAGINALISTADO.PHP

PROVINCIA.INC

Imagen del Formulario:

Fichero HTML

Fichero PHP

Mejora en el formulario mediante GeoCoder

El siguiente código consulta la BD y muestra un punto por cada contacto:

Y el código definitivo es:

Opciones de la capa KML

Detalles de recursos KML

Leitmotiv

Dalek-free

adsense

Entradas recientes

Archivos

Categorías

TAGs

Apache en Ubuntu

Arquitectura

Base de datos

Desarrollo web

HTML 5

Lenguajes

Mapas en la web

Metodología

Mis otras páginas

Multimedia

PHP

Programación para niños

Redes

Webs desarrolladas en el curso

Estadísticas