Scribd
Cargar
123 vistas

Introducción A Google Maps APIv3 (Parte 9) - PHP y MySQL

Este documento describe cómo crear marcadores en un mapa de Google utilizando PHP para acceder a datos almacenados en una base de datos MySQL. Explica cómo crear una base de datos y tabla para almacenar la información de los marcadores, incluyendo campos como latitud, longitud, nombre, dirección y tipo. Luego muestra cómo conectarse a la base de datos desde PHP, consultar los datos y crear marcadores e infoWindows dinámicamente en el mapa utilizando datos de cada registro. El objetivo es mostrar cómo integrar bases de datos con Google Maps usando PHP para

Cargado por

Angel Miguel
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
123 vistas

Introducción A Google Maps APIv3 (Parte 9) - PHP y MySQL

Este documento describe cómo crear marcadores en un mapa de Google utilizando PHP para acceder a datos almacenados en una base de datos MySQL. Explica cómo crear una base de datos y tabla para almacenar la información de los marcadores, incluyendo campos como latitud, longitud, nombre, dirección y tipo. Luego muestra cómo conectarse a la base de datos desde PHP, consultar los datos y crear marcadores e infoWindows dinámicamente en el mapa utilizando datos de cada registro. El objetivo es mostrar cómo integrar bases de datos con Google Maps usando PHP para

Cargado por

Angel Miguel
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

Search … Search

Pinakes
blog sobre biblioteconomía, software libre y tecnología

Inicio Categorías Sobre mí

Introducción a Google
Maps APIv3 (parte 9):
PHP y MySQL
Rubén Alcaraz, 26 mayo, 2016, 14 comentarios — Informática
Etiquetas: Google Maps, JavaScript, MySQL, PHP

Introducción
En este tutorial de Google Maps, utilizaremos el lenguaje de programación
PHP para acceder a la información de cada marcador almacenada en una base
de datos MySQL.

Creación de la base de datos y la tabla


En primer lugar, crearemos una base de datos en nuestro servidor y una tabla
donde almacenar la información de cada uno de nuestros marcadores. 
Podemos crear todos los campos que necesitemos, aunque como mínimo
necesitaremos la latitud, longitud y el nombre del lugar. En nuestro caso
también usaremos otros campos como la dirección y el tipo de lugar. La tabla
que utilizaremos en este ejemplo tendrá la siguiente estructura:

Source code      

CREATE TABLE IF NOT EXISTS `locales` (


`idlocal` int(11) NOT NULL,
`nombre` varchar(80) DEFAULT NULL,
`lat` float DEFAULT NULL,
`lng` float DEFAULT NULL,
`descripcion` varchar(500) DEFAULT NULL,
`direccion` varchar(80) DEFAULT NULL,
`tipos_nombre` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Acceso a los datos mediante PHP


Para acceder a los datos almacenados abriremos una conexión mediante la
función «mysqli_connect». Posteriormente, pasaremos como parámetros a la
función
Uso «mysqli_query», los datos de la conexión y la consulta a la base de
de cookies
datos.
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas cookies y la aceptación de la política de cookies.
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 1/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

Source code      

$con = mysqli_connect($host, $user, $pass, $db_name) or die("Error en la conexión");


$query = "select * from locales";
$resultado = mysqli_query($con,$query);

Creación del mapa


Para la creación del mapa utilizaremos JavaScript, de la misma manera que en
tutoriales anteriores.

Source code      

var bcn = new google.maps.LatLng(41.3797362,2.1730737);


var mapOptions = {
center: bcn,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

Creación de los marcadores e


infoWindows
Para ello, combinaremos el código JavaScript y PHP.

Dentro de un bucle while extraeremos en cada iteración los resultados


almacenados en un array asociativo («mysqli_fetch_assoc») que contendrá el
resultset obtenido anteriormente y almacenado en la variable $resultado.

En cada iteración se crea un nuevo marcador con su infoWindow a partir de los


datos de cada una de las las obtenidas en la consulta a la base de datos
($data[‘nombre_de_la_columna’]).

Source code      

Uso de cookies
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas cookies y la aceptación de la política de cookies.
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 2/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

<?php
$i=1;
while ($data = mysqli_fetch_assoc($resultado)) {
?>
<script type="text/javascript">
var marker<?php echo $i;?> = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $data['lat']; ?>, <? php echo $data['lng']; ?>),
map: map,
title: <?php echo "'".$data['nombre']."'"; ?>,
icon: 'img/icono.png',
});

var contentString = "<h1><span class='glyphicon glyphicon-asterisk' aria-hidden='true'></span>&#160;<?php echo


"".$data['nombre'].""; ?></h1><p><span class='glyphicon glyphicon-screenshot' aria-hidden='true'></span>&#160;
<b>Dirección</b><br> <?php echo "".$data['direccion'].""; ?></p><p><span class='glyphicon glyphicon-pencil' aria-
hidden='true'></span>&#160;<b>Descripción</b><br><?php echo "".$data['descripcion'].""; ?></p>"

var infowindow<?php echo $i;?> = new google.maps.InfoWindow({


content: contentString
});

google.maps.event.addListener(marker<?php echo $i;?>, 'click', function() {


infowindow<?php echo $i;?>.open(map,marker<?php echo $i;?>);
});
</script>
<?php
$i++;
}
mysqli_close($con);
?>

Todo junto:

Source code      

Uso de cookies
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas cookies y la aceptación de la política de cookies.
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 3/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1>Mapa de locales de Barcelona</h1>
<div style="text-align:center;"><a href="index.php" class="btn btn-info">Volver al buscador</a></div><br>
<br>
<div id="mapa" style="width:100%;height:360px;"></div><br>
<?php
$con = mysqli_connect($host, $user, $pass, $db_name) or die("Error en la conexión.");
$query = "select * from locales";
$resultado = mysqli_query($con,$query);
echo "<h2>Lista de locales</h2><br>";
?>
<script type="text/javascript">
var bcn = new google.maps.LatLng(41.3797362,2.1730737);
var mapOptions = {
center: bcn,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
</script>
<?php
$i=1;
while ($data = mysqli_fetch_assoc($resultado)) {
?>
<script type="text/javascript">
var marker<?php echo $i;?> = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $data['lat']; ?>, <?php echo $data['lng']; ?>),
map: map,
title: <?php echo "'".$data['nombre']."'"; ?>,
icon: 'img/icono.png',
});

var contentString = "<h1><span class='glyphicon glyphicon-asterisk' aria-hidden='true'></span>&#160;<?


php echo "".$data['nombre'].""; ?></h1><p><span class='glyphicon glyphicon-screenshot' aria-hidden='true'>
</span>&#160;<b>Dirección</b><br> <?php echo "".$data['direccion'].""; ?></p><p><span class='glyphicon glyphicon-
pencil' aria-hidden='true'></span>&#160;<b>Descripción</b><br><?php echo "".$data['descripcion'].""; ?></p>"

var infowindow<?php echo $i;?> = new google.maps.InfoWindow({


content: contentString
});

google.maps.event.addListener(marker<?php echo $i;?>, 'click', function() {


infowindow<?php echo $i;?>.open(map,marker<?php echo $i;?>);
});
</script>
<?php
$i++;
}
mysqli_close($con);
?>
</div>
</div>
</div>
</body>

Comentarios

Juan Carlos dice:

7 abril, 2017 a las 12:14


Gracias! Para los que usen web2py el código queda tal que así:

function initMap() {
var myLatLng = {lat: 40.46366700000001, lng: -3.7492200000000366};
var map = new google.maps.Map(document.getElementById(‘map’), {
Uso de cookies
zoom: 5,
center:
Este sitio myLatLng
web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas
}); cookies y la aceptación de la política de cookies.
{{ ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 4/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

associa = db.associacions.with_alias(«a»)
poblacio = db.poblaciones.with_alias(«p»)
rows=
db(associa).select(associa.nom,poblacio.poblacion,poblacio.latitud,poblacio.longitud,left=
[poblacio.on(poblacio.poblacion == associa.poblacio)])
i=1
for r in rows:
}}

var marker{{=i}} = new google.maps.Marker({


position: new google.maps.LatLng(parseFloat({{=r.p.latitud}}),
parseFloat({{=r.p.longitud}})),
map: map,
title: «{{=r.a.nom.replace(«\n»,»»)}}»,
});

{{

i+=1
pass
}}
}

Responder

juanelo dice:

1 noviembre, 2017 a las 4:59


EXCELENTE CODIGO, en verdad muy bueno. GRACIAS

Responder

Claudio A. Nipotti dice:

7 marzo, 2018 a las 12:46


Buenos días, Rubén.
Acabo de descubrir esta serie de notas sobre Google Maps y antes de leerlas quisiera
consultarle si lo que necesito es posible y puede hacerse a través de lo que ud. explica:

Dada una dirección, debe aparecer con un marcador en Google Maps, con un zoom
tal que muestre un radio de 1000 metros como para saber en qué parte aproximada
de la ciudad está.

Sé que para eso podría usarse simplemente Google Maps, pero, a pedido de los
usuarios, el mapa debe aparecer integrado en una página que hago donde habría
otros datos sobre la zona (de eso ya me encargué, falta únicamente el mapa).

Muchas gracias!!

Responder

Claudio A. Nipotti dice:

7 marzo, 2018 a las 12:50


Perdón, olvidaba decir que no dispongo de coordenadas, solo una base de datos
con los nombres de las calles y rangos numéricos para validar que la dirección
solicitada exista.
Uso de cookies
Responder
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas cookies y la aceptación de la política de cookies.
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 5/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

Rubén Alcaraz dice:

7 marzo, 2018 a las 20:03


Hola Claudio,
Sí, se puede. Dale un vistazo a esta otra entrada:
http://www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-
maps-apiv3-parte-7-anadir-marcadores-geocodi cando-direcciones/ y a la
documentación de la API en:
https://developers.google.com/maps/documentation/javascript/examples/geocoding-
simple
Saludos.

Responder

Silverio Ortiz dice:

28 mayo, 2018 a las 12:17


Hola Ruben, quisiera saber cómo se utiliza el plugin Shortcode Carousel. Ya lo he
instalado, pero soy muy novato y no sé si hay que con gurarlo en algún archivo de mi
instalación de Omeka o si directamente puedo insertar en Simple Pages. Tendrás
algún ejemplo para enviarme?
Muchas gracias!
Silverio

Responder

Rubén Alcaraz dice:

6 julio, 2018 a las 8:13


Hola Silverio,
Basta con añadir a la página en la que quieras mostrar el carrusel el shortcode
[carousel]
Esto muestra un carrusel con todos los ítems.
Si quieres mostrar sólo los destacados
[featured_carousel]
Y si se trata de mostrar sólo los últimos añadidos
[recent_carousel]
También existen otros parámetros con los que puedes jugar y que se muestran
en: https://omeka.org/classic/docs/Plugins/ShortcodeCarousel/
Saludos.

Responder

Gonzalo dice:

25 octubre, 2018 a las 0:55


Buenas noches!
Estoy utilizando Lea et + Ionic para crear una app donde me muestre la ubicación de
mis usuarios y me gustaría guardar la info de los marcadores de mis usuarios
(ubicación, Lat/Lng) en mi base de datos MySQL + PHP y que el script del mapa tome
esa info para mostrar con marcadores la ubicación/desplazamiento de mis usuarios.

Me podrían ayudar? Sugerencias!!!!


Uso de cookies
Desde ya GRACIAS SDOS A TODOS!
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas cookies y la aceptación de la política de cookies.
Responder
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 6/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

Ale Alosno dice:

6 noviembre, 2018 a las 21:28


Necesito la api para que funcione verdad??

Responder

Rubén Alcaraz dice:

7 noviembre, 2018 a las 20:22


Hola,
Sí, a día de hoy, es necesario un código API e incluir un método de pago en tu
cuenta de desarrollador, aunque no vayas a pasarte del uso gratuito.
Saludos.

Responder

Rodolfo Jeronimo dice:

22 marzo, 2019 a las 6:54


Como integro la API y el código API para que funcione? Perdón, ando algo
perdido…

Responder

Rubén Alcaraz dice:

22 marzo, 2019 a las 8:04


Hola Rodolfo,
Revisa este otro post:
http://www.rubenalcaraz.es/pinakes/informatica/como-obtener-una-
clave-api-para-google-maps/

Responder

Marcelo dice:

31 diciembre, 2018 a las 13:11


Hola Ruben, de antemano gracias por tu atencion. Estoy desarrollando una pagina
web a pulmon ya que no soy experto y necesito que al ingresar una direccion en un
campo input, me autocomplete con direcciones reales y al seleccionar una poder
almacenar en una base de datos, el nombre del pais, la region, el barrio ,las
coordenadas de la misma y una captura del mapa con la direccion seleccionada (con
un zoom de nido). Esto es posible? No encuentro en la web como hacerlo y vi tus
tutoriales que son muy buenos y me atrevi a preguntarte. Gracias

Responder

Rubén Alcaraz dice:

31 diciembre, 2018 a las 18:59


Uso de cookies
Hola Marcelo,
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas Poder, se ypuede
cookies hacer, pero
la aceptación es mucho
de la política más complejo que lo que encontrarás en
de cookies.
este blog sobre Google Maps. Así, de primeras, necesitarás utilizar también la API
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 7/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

de autocompletado
(https://developers.google.com/maps/documentation/javascript/places-
autocomplete), la de mapas estáticos
(https://developers.google.com/maps/documentation/maps-static/intro) y quizá la
de geocodi cación inversa
(https://developers.google.com/maps/documentation/javascript/examples/geocoding-
reverse).
Saludos.

Responder

Deja un comentario
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están
marcados con *

Comentario

Nombre *

Correo electrónico *

Web

Código CAPTCHA *

Publicar el comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los
datos de tus comentarios.

Archivo Categorías
Elegir el mes Elegir la categoría

Uso de cookies
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas cookies y la aceptación de la política de cookies.
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 8/9
18/3/2020 Introducción a Google Maps APIv3 (parte 9): PHP y MySQL

Entradas más vistas Últimos comentarios


Cómo obtener una clave API para Google Maps Rubén Alcaraz en Introducción a Google Maps APIv3 (parte
Selección
63.369 vistas | publicado el febrero 2, 2017 | bajo Informática 5): múltiples marcadores con infoWindow

12 frameworks HTML5 para crear webs responsivos Jeison Restrepo en Introducción a Google Maps APIv3 (parte
hml5
39.247 vistas | publicado el septiembre 24, 2013 | bajo Diseño web 5): múltiples marcadores con infoWindow

Introducción a Google Maps APIv3 (parte 5): múltiples Rubén Alcaraz en Software libre para bibliotecas, archivos y
Varios
marcadores con infoWindow museos 2015
marcadores
17.124 vistas | publicado el febrero 26, 2015 | bajo Informática Rubén Alcaraz en Curatescape, un framework de código
abierto para Omeka
Introducción a Google Maps API v3: fundamentos
Google-
15.214 vistas | publicado el septiembre 18, 2013 | bajo Informática Alvaro en Software libre para bibliotecas, archivos y museos
2015
Software libre para bibliotecas, archivos y museos 2015
Logos
15.137 vistas | publicado el septiembre 1, 2015 | bajo Software libre

BY-SA 4.0 — Pinakes, 2020.


Foto de per l: Mireia Alises. Desarrollado con WordPress.

Uso de cookies
Este sitio web utiliza cookies para recoger datos de analítica. Si continúas navegando estás dando tu consentimiento para la aceptación de las
mencionadas cookies y la aceptación de la política de cookies.
ACEPTAR

www.rubenalcaraz.es/pinakes/informatica/introduccion-a-google-maps-apiv3-parte-9-php-y-mysql/ 9/9

También podría gustarte