Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: javaquery en 04 de Mayo 2017, 18:05
-
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
-
Buenos dias
H estado revisandolo pero no doy con el error, necesito entregarlo esta semana, a ver si alguien me puede ayudar, gracias
saludos
-
Buenas javaquery.
¿Se puede usar Ajax?
Saludos. ;D
-
Hola
que yo sepa uno que lo ha hecho no a usado ajax, pero ¿con ajax es mas facil? si se puede hacer sin ajax mejor, en realidad no hay que complicarlo mucho como ha dicho el profesor.
gracias
-
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...
<?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="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
-
ahora si me crea los marcadores, pero cuando creo uno y carga el mapa no aparece el marcador con la banderita roja, ¿a ti te funciona?
gracias
-
Hola.
A mi me funciona perfectamente, te dejo un enlace para que lo veas:
http://aprendehtml.byethost3.com/Ajax/mapa
Lo único que se me ocurre sería el formato en el que estás incluyendo las coordenadas en la base de datos, para que funcione correctamente la solución que propuse, las coordenadas deben de ir de la siguiente forma:
40.417511, -3.707692
Es importante que vayan separadas por la coma.
Saludos. ;D
-
Hola
Ya me funciona, el error era lo que comentabas yo en el formulario para meter las coordenadas usaba {lat: 36.744284, lng: -3.518102} y por eso no me aparecia el marcador,
Gracias ;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