Buenas tardes, estoy haciendo el siguiente ejercicio.
Crear una aplicación web híbrida utilizando la API de Google Maps.
La aplicación usará una base de datos para almacenar las ubicaciones que el usuario quiera visualizar en el mapa. Esta base de datos tendrá las siguientes tablas:
CATEGORÍA
id_categoria int, llave primaria (auto incrementable)
nombre varchar(50)
MARCADOR
id_marcador int, llave primaria (auto incrementable)
nombre varchar(50),
descripción text,
coordenadas text,
categoría int, llave secundaria de CATEGORIA
Los marcadores se clasifican en diversas categorías, que pueden ser, por ejemplo: restaurantes, bares o discotecas.
La aplicación tendrá una página desde la que se podrán dar de alta categorías y marcadores, haciendo un correcto uso de formularios.
En otra página, el usuario podrá elegir de un desplegable qué categoría desea ver, y se cargarán en el mapa los datos de los marcadores de la categoría seleccionada. La información se mostrará de la siguiente forma: inicialmente sólo se verá el marcador en el mapa, pero al clicar sobre él, se mostrarán el nombre y la descripción.
Debes entregar el código de la base de datos junto con las páginas PHP-HTML de tu aplicación.
Tengo la aplicacion dividida en 4 codigos
Uno con las variables de la base de datos:
datos.php
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db_name = 'mapa';
?>
Otro usuario.php, aqui selecciono una categoria
<?php
session_start();
require_once("datos.php");
$con = mysqli_connect($host, $user, $pass, $db_name) or die ("Error en la conexión con la base de datos");
?>
<!DOCTYPE html>
<html>
<head>
<title>Panel de usuario</title>
<meta charset="UTF-8">
<form method="POST" action="index.php" name="form-select">
<p>ELIGE UNA CATEGORIA</p>
<p>Categoria:</p>
</head>
<body>
<?php
$query = "select * from categoria";
$rows = mysqli_query($con, $query);
echo "<select name='categoria'><option value=''></option>";
while($row = mysqli_fetch_array($rows)){
extract($row);
echo "<option value='$id_categoria'>$nombre</option>";
}
echo "</select>";
mysqli_close($con);
?>
</br></br>
<input type="submit" value="Buscar" name="buscar_cat" >
</form>
<?php
if(isset($_SESSION['busqError'])){
echo $_SESSION['busqError'];
unset($_SESSION['busqError']);
}
if(isset($_SESSION['busqVac'])){
echo $_SESSION['busqVac'];
unset($_SESSION['busqVac']);
}
?>
</body>
</html>
formulario.php, se darán de alta categoría y marcador
<?php
session_start();
require_once("datos.php");
$con = mysqli_connect($host, $user, $pass, $db_name) or die ("Error en la conexión con la base de datos");
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="formulario.php" method="post" name="formCategoria" >
<u><h1>Alta categorias</h1></u>
Nombre: <input type="text" name="nombre" /><br/><br/>
<input type="submit" value="Alta categoria" name="alta_categoria">
</form>
<?php
if(isset($_SESSION['catOK'])){
echo $_SESSION['catOK'];
unset($_SESSION['catOK']);
}
if(isset($_SESSION['catError'])){
echo $_SESSION['catError'];
unset($_SESSION['catError']);
}
?>
<form method="POST" action="admin.php" name="formMarcadores">
Nombre marcador: <input type="text" name="nom_marcador" /><br/><br/>
Descripcion: <input type="text" name="descripcion" /><br/><br/>
Coordenadas:<input type="text" name="coordenadas">
<?php
$query = "select * from categoria";
$rows= mysqli_query($con, $query);
echo "<select name='categoria'><option value=''></option>";
while($row = mysqli_fetch_array($rows)){
extract($row);
echo "<option value='$id_categoria'>$nombre</option>";
}
echo "</select>";
?>
<br/><br/>
<input type="submit" value="Alta marcador" name"alta_marcador">
</form>
<?php
if(isset($_SESSION['marcadorOK'])){
echo $_SESSION['marcadorOK'];
unset($_SESSION['marcadorOK']);
}
if(isset($_SESSION['marcadorError'])){
echo $_SESSION['marcadorError'];
unset($_SESSION['marcadorError']);
}
?>
</body>
</html>
<?php
if(isset($_POST['alta_categoria'])){
if(isset($_POST['nombre']) && !empty($_POST['nombre']))
{
$nombre = $_POST['nombre'];
$query_C = "insert into categoria(nombre) values ('$nombre')";
mysqli_query($con, $query_C);
$_SESSION['catOK'] = "¡Categoria creada!";
header("Location: formulario.php");
}
else
{
$_SESSION['catError'] = "Escribe el nombre de la categoria por favor";
header("Location: formulario.php");
}
}
if(isset($_POST['alta_marcador']))
{
if(isset($_POST['alta_marcador']) && !empty($_POST['alta']) && isset($_POST['coordenadas']) && !empty($_POST['coordenadas']) && isset($_POST['categoria']))
{
$nombre = $_POST['nom_marcador'];
$descripcion = $_POST['descripcion'];
$coordenadas = $_POST['coordenadas'];
$categoria = $_POST['categoria'];
$query_M = "insert into marcador(nombre, descripcion, coordenadas, categoria) values ('$nombre', '$descripcion', '$coordenadas', $categoria)";
mysqli_query($con, $query_M);
$_SESSION['marcadorOK'] = "Marcador creado correctamente";
header("Location: formulario.php");
}
else
{
$_SESSION['marcadorError'] = "<span style='color:red;'>Rellena todos los campos por favor.</span>";
header("Location: formulario.php");
}
}
mysqli_close($con);
?>
index.php configurado con el mapa, pero ahora no me carga
<?php
session_start();
require_once("datos.php");
$con = mysqli_connect($host, $user, $pass, $db_name) or die('Error con la conexion de la base de datos');
if (isset($_POST['categoria']) && !empty($_POST['categoria'])){
$ct = $_POST['categoria'];
$query = "select * from marcador where categoria = $ct";
$result = mysqli_query($con, $query);
$rows = $result->num_rows;
if($rows == 0){
$_SESSION['busqVac'] = "No se ha encontrado ningun marcador con esta categoria"
header("Location: usuario.php");
}
}
else{
$_SESSION['busqError'] = "Selecciona una categoria por favor";
header("Location: usuario.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Mapa Mptril</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="map" style="height:50%; width:50%"></div>
<script>
var map;
function initMap() {
var myLatLng ={lat: 36.7364345, lng: -3.4702847};
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 15
});
<?php
while($row = mysqli_fetch_array($result)){
extract($row);
?>
var contentString = <?php echo "'".$nombre."<br>".$descripcion."'";?>;
var infowindow<?php echo $id_marcador;?> = new google.maps.InfoWindow({
content: contentString
});
var marker<?php echo $id_marcador;?> = new google.maps.Marker({
position: <?php echo $coordenadas;?>,
map: map,
title: <?php echo "'".$nombre."'";?>
});
marker<?php echo $id_marcador;?>.addListener('click', function() {
infowindow<?php echo $id_marcador;?>.open(map, marker<?php echo $id_marcador;?>);
});
<?php
}
mysql_close($con);
?>
}
</script>
<a href ="usuario.php">Volver</a>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAXTM8tcD_fVL09AEKUKhFyundS8el6C70&callback=initMap"
async defer></script>
</body>
</html>
He probado la aplicacion y me da de alta categoria, pero los marcadores no me funciona.
Un saludo
Tema: PHP JavaScript MySQL Geolocalización, añadir marcadores a mapa Api Google Maps (Leído 11891 veces)
RSS -
WAP2