Marcadores multiples desde una base de datos en Google Maps

Publicado el 14-10-2012 | TAGS: google maps tutoriales | (7 comentarios)

Tal y como dijimos en el anterior post de este mini curso de Google Maps, seguimos adentrándonos más en la API de Google, en esta ocasión creando marcadores múltiples, haciendo uso de una base de datos, en este caso MySQL.

Lo primero que haremos será, crear una sencilla tabla, a la que llamaremos "mapas" en nuestra base de datos, en la que recogeremos información sobre cada uno de los marcadores que vamos a situar en nuestro mapa.

  1. CREATE TABLE IF NOT EXISTS `mapas` (
  2.   `id` bigint(20) NOT NULL AUTO_INCREMENT,
  3.   `lat` varchar(50) NOT NULL,
  4.   `lng` varchar(50) NOT NULL,
  5.   `title` varchar(150) NOT NULL,
  6.   `content` text NOT NULL,
  7.   `icon` varchar(200) NOT NULL,
  8.   PRIMARY KEY (`id`)
  9. ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
  10.  
  11.  
  12. INSERT INTO `empresas` (`id`, `lat`, `lng`, `title`, `content`, `icon`) VALUES
  13. (1, '37.427770', '-122.144841', 'Queseria', 'Queseri­a de la Calle 1', 'icons/cheese.png'),
  14. (2, '37.413320', '-122.125604', 'Fruteria', 'Fruteri­a de la Calle 2', 'icons/fruits.png'),
  15. (3, '37.433480', '-122.139062', 'Restaurante', 'Restaurante Chino', 'icons/japanese-sweet-2.png'),
  16. (4, '37.445427', '-122.162307', 'Bar', 'Bar de la Calle 4', 'icons/liquor.png');

Una vez creada nuestra tabla, con algunos ejemplos introducidos en la misma, pasaremos a crear nuestro archivo .xml, que pasará los datos a Google Maps para representarlo en nuestro mapa.

Nuestro XML lo generaremos a partir de un archivo programado en PHP, el cual se conectará a nuestra base de datos y seleccionará la tabla que hemos creado, iterando cada uno de los resultados que se encuentren en la misma.

Para conseguir que nuestro archivo PHP sea representado como un XML, cambiaremos su cabecera para que lo muestre tal y como deseamos. Guardaremos nuestro archivo con el nombre de "mapasql.php".

En el caso de que introduzcamos caracteres especiales, como acentos, eñes, interrogaciones, etc...sería interesante crear una función en la que sustituyamos los caracteres conflictivos por sus equivalentes. En nuestro ejemplo no lo utilizaremos, pero si dejaremos comentada la función que puede utilizarse para este fin.

  1. <?
  2. /* lo dejamos comentado, pero puedes usarlo si vas a introducir en tu base de datos resultados con acentos u otros caracteres especiales
  3.  
  4. function specialCharacters($s) {
  5. $s = str_replace('[áàâãªä@]','a',$s);
  6. $s = str_replace('[ÁÀÂÃÄ]','A',$s);
  7. $s = str_replace('[éèêë]','e',$s);
  8. $s = str_replace('[ÉÈÊË]','E',$s);
  9. $s = str_replace('[íìîï]','i',$s);
  10. $s = str_replace('[ÍÌÎÏ]','I',$s);
  11. $s = str_replace('[óòôõºö]','o',$s);
  12. $s = str_replace('[ÓÒÔÕÖ]','O',$s);
  13. $s = str_replace('[úùûü]','u',$s);
  14. $s = str_replace('[ÚÙÛÜ]','U',$s);
  15. $s = str_replace('[¿?\]','_',$s);
  16. $s = str_replace('ñ','n',$s);
  17. $s = str_replace('Ñ','N',$s);
  18.  
  19. return $s;
  20.  
  21. */
  22.  
  23.  
  24. $con = mysql_connect("localhost","root","password") or die (mysql_error());
  25. mysql_select_db("mibasededatos",$con) or die (mysql_error());
  26.  
  27.  
  28. $query = "SELECT * FROM mapas";
  29. $resultado = mysql_query($query);
  30. $row = mysql_fetch_assoc($resultado);
  31.  
  32.  
  33. header("Content-Type: text/xml;charset=iso-8859-1");
  34. echo '<?xml version="1.0" encoding="UTF-8"?>';
  35. echo '<markers xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
  36. do{
  37. echo'<marker id="'.$row["id"].'" lat="'.$row["lat"].'" lng="'.$row["lng"].'" title="'.$row["title"].'" content="'.$row["content"].'" icon="'.$row["icon"].'"/>';
  38. }while($row=mysql_fetch_assoc($resultado));
  39. echo '</markers>';
  40.  
  41. ?>

Después de crear nuestro archivo XML a partir de PHP, crearemos nuestro mapa, abriendo un nuevo documento HTML, que se parecerá mucho al de nuestro ejemplo anterior.

El único cambio que introduciremos, será la llamada a nuestro archivo, llamando no a un XML, sino a nuestro archivo "mapasql.php".

Igualmente, utilizaremos el método "find" de JQuery, para que busque en cada iteración la etiqueta "marker", y vaya creando cada uno de los marcadores en el mapa.

  1. <style type="text/css">
  2.   html { height: 100% }
  3.   body { height: 100%; margin: 0px; padding: 0px }
  4.   #map_canvas { height: 100%; display:block; }
  5. <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  6. <script type="text/javascript"
  7.    src="https://maps.google.com/maps/api/js?sensor=true">
  8. <script type="text/javascript">
  9.   $(document).ready(function () {
  10.     var latlng = new google.maps.LatLng(37.427770, -122.144841); // los parametros siempre se transmiten en este orden: (latitud,longitud)
  11.     var myOptions = {
  12.       zoom: 14,
  13.       center: latlng,
  14.       mapTypeId: google.maps.MapTypeId.ROADMAP
  15.     };
  16.     var map = new google.maps.Map(document.getElementById("map_canvas"),
  17.         myOptions);
  18.        
  19.    
  20.    
  21.    
  22.     $.get("sitemap.php", function (xml) {
  23.     $(xml).find("marker").each(function () { /*loop*/
  24.        
  25.        var lat = $(this).attr('lat');
  26.        var lng = $(this).attr('lng');
  27.        var title = $(this).attr('title');
  28.        var content = $(this).attr('content');
  29.        var icon = $(this).attr('icon');
  30.        var id = $(this).attr('id');
  31.            
  32.        var infoWindow = new google.maps.InfoWindow({
  33.        content: content
  34.        });
  35.  
  36.        var marcador = new google.maps.Marker({
  37.         position: new google.maps.LatLng(lat, lng),
  38.         map: map,
  39.         title: title,
  40.         icon: icon
  41.         })
  42.    
  43.    
  44.     });/** end loop*/
  45.    
  46.    
  47.    
  48.    
  49.    
  50.     }); /* end document ready*/
  51.    
  52.    
  53.    
  54.    
  55.  
  56.  
  57.  
  58.   });
  59.  
  60. </head>
  61.  
  62.  
  63.   <div id="map_canvas"></div>
  64.  
  65.  
  66.  
  67. </body>
  68. </html>

Y de este modo tan sencillo concluimos este pequeño ejemplo. En nuestro próximo capítulo, seguiremos trabajando sobre el método InfoWindow, para recuperar la información contenida en él y mostrarlo fuera del mapa. Comenta y comparte este artículo.

Comentarios

ricardo riveroll escrito el 13-11-2013

Hola una pregunta cuando ejecuto el archivo no me salen los marcadores me podrían explicar el motivo gracias

Blanca escrito el 11-10-2013

Hola que tal, intente poner a prueba el ejemplo en mi tabla de una base de datos , pero no comprendo no me quiero jalar los datos del archivo.php el cual crea el xml, porfavor me podrían ayudar nosé cual es mi problema.

Saludos.

luis escrito el 02-10-2013

Hola!
Consulta.
No me queda claro donde llamamos al mapasql.php dentro del HTML.
Gracias,

Carlos G. escrito el 23-08-2013

Muchas gracias, me fue de gran ayuda

ana escrito el 14-07-2013

Hola!
Consulta.
No me queda claro donde llamamos al mapasql.php dentro del HTML.
Gracias,
freddy herrera escrito el 28-05-2013

Hola.. hasta aquí todo super... pero me pregunto si no es mucho pedir, cuando vas a continuar subiendo más capítulos... es muy interesante.. y te felicito por compartir tu conocimiento... espero subas pronto más capítulos... Gracias..!!!

Jorge Botia escrito el 27-05-2013

Hola, muy bueno tu tutorial, creo que me va a servir mucho para lo que necesito hacer. De casualidad tienes un video-tutorial? es que la verdad no soy muy bueno para MySQL y quisiera ver como creas esa base de datos. Muchas gracias!!

Escribe tu comentario