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
<?phpsession_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
<?phpsession_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
<?phpsession_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
Personalmente pienso que es más fácil y rápido usando Ajax, así que te dejo una posible solución usando Ajax.
En el código de formulario.php cambié alguna cosilla, porque no me dejaba crear nuevos marcadores...
<?phpsession_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="formulario.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']) && 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);?>
El código de usuarios.php no cambié nada, pero lo vuelvo a poner para que quede todo junto:
<?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">
</head>
<body>
<form method="POST" action="index1.php" name="form-select">
<p>ELIGE UNA CATEGORIA</p>
<p>Categoria:</p>
<?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>
En el codigo de index.php si cambié bastantes cosas, lo dejo aquí:
<?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"); } mysqli_close($con); } 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">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>Mis mapas</h1>
<div id="map"></div>
<script>
function initMap() {
var divMapa = document.getElementById('map');
var xhttp;
var resultado = [];
var markers = [];
var infowindowActivo = false;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
resultado = xhttp.responseText;
var objeto_json = JSON.parse(resultado);
for (var i = 0; i < objeto_json.length; i ++) {
var latlong = objeto_json[i][2].split(',');
myLatLng = {
lat: Number(latlong[0]),
lng: Number(latlong[1])
};
markers[i] = new google.maps.Marker({
position: myLatLng,
map: map,
title: objeto_json[i][0]
});
var contentString = '<h1 id="firstHeading" class="firstHeading">' +
objeto_json[i][0] + '</h1>'+ '<div id="bodyContent">'+
'<p><b>' + objeto_json[i][0] + '</b></p><p>' + objeto_json[i][1] +
'</p></div>';
markers[i].infoWindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markers[i], 'click', function(){
if(infowindowActivo){
infowindowActivo.close();
}
infowindowActivo = this.infoWindow;
infowindowActivo.open(map, this);
});
}
}
};
var myLatLng = {
lat: 40.417079,
lng: -3.703892
};
var map = new google.maps.Map(divMapa,{
zoom: 15,
center: myLatLng
});
var tipo = <?php echo $ct; ?>
;
var url = "marcadores_a_mostrar.php?tipo="+tipo;
xhttp.open("POST", url, true);
xhttp.send();
}
</script>
<a href="usuario.php">Volver</a>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAXTM8tcD_fVL09AEKUKhFyundS8el6C70&callback=initMap"></script>
</body>
</html>
Y creé un archivo más, que llamé marcadores_a_mostrar.php, que se encarga de devolver un objeto json, que luego transformaremos en un array en index.php...
<?php $nuevaCoor = ""; require_once("datos.php"); $ct = $_REQUEST["tipo"]; $con = mysqli_connect($host, $user, $pass, $db_name) or die('Error con la conexion de la base de datos'); $query = "select * from marcador where categoria = $ct"; $result = mysqli_query($con, $query); $i = 0; $rows = $result->num_rows; while($row = mysqli_fetch_array($result)){ extract($row); $resultado[$i][0] = $nombre; $resultado[$i][1] = $descripcion; $resultado[$i][2] = $coordenadas; $i++; } $resultado = json_encode($resultado); mysqli_close($con); echo $resultado; ?>
Saludos. ;D
Te dejo una solución sin usar Ajax.
index.php
<?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">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>Mis mapas</h1>
<div id="map"></div>
<?php $query = "select * from marcador where categoria = $ct"; $result = mysqli_query($con, $query); $i = 1; $rows = $result->num_rows; $resultado = ""; while($row = mysqli_fetch_array($result)){ extract($row); if($i == $rows) { $resultado .= $nombre."|".$descripcion."|".$coordenadas; } else { $resultado .= $nombre."|".$descripcion."|".$coordenadas."/"; } $i++; } mysqli_close($con); ?>
<script>
function initMap() {
var divMapa = document.getElementById('map');
var resultado = "<?php echo $resultado; ?>
";
var markers = [];
var infowindowActivo = false;
var myLatLng = {
lat: 40.417079,
lng: -3.703892
};
var map = new google.maps.Map(divMapa,{
zoom: 13,
center: myLatLng
});
resultado = resultado.split("/");
for (var i = 0; i < resultado.length; i++) {
resultado[i] = resultado[i].split('|');
var latlong = resultado[i][2].split(',');
myLatLng = {
lat: Number(latlong[0]),
lng: Number(latlong[1])
};
markers[i] = new google.maps.Marker({
position: myLatLng,
map: map,
title: resultado[i][0]
});
var contentString = '<h1 id="firstHeading" class="firstHeading">' +
resultado[i][0] + '</h1>'+ '<div id="bodyContent">'+
'<p><b>' + resultado[i][0] + '</b></p><p>' + resultado[i][1] +
'</p></div>';
markers[i].infoWindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markers[i], 'click', function(){
if(infowindowActivo){
infowindowActivo.close();
}
infowindowActivo = this.infoWindow;
infowindowActivo.open(map, this);
});
}
}
</script>
<a href="usuario.php">Volver</a>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAUcMXEkbv5a0aV1dqPRd4onZpmRgZbbx0&callback=initMap"></script>
</body>
</html>
En este caso no haría falta el archivo marcadores_a_mostrar.php.
Saludos. ;D