Gravitania GEO Articulos

El potencial de Google Maps se incrementa cuando se combina en mashups soportados por bases de datos.

Este tutorial está destinado a desarrolladores familiarizados con PHP/MySQL y que deseen aprender a utilizar Google Maps con una base de datos MySQL. Cuando hayas terminado este tutorial, tendrás un mapa de Google que no estará basado en una base de datos de ubicaciones. El mapa distinguirá entre dos tipos de ubicaciones (restaurantes y bares) mediante la asignación de iconos distintivos a los marcadores. Al hacer clic, aparecerá sobre el marcador una ventana con información de la dirección y del nombre.

El tutorial se divide en los siguientes pasos:

Creación de la tabla

Al crear la tabla MySQL, presta especial atención a los atributos lat y lng. Con las funciones actuales de zoom de Google Maps, solo necesitas seis dígitos de precisión después de la coma decimal. Para mantener al mínimo el espacio de almacenamiento necesario para nuestra tabla, puedes especificar que los atributoslat y lng sean valores “float” con un tamaño de (10,6). De esta forma, los campos podrán almacenar seis dígitos después de la coma decimal más un máximo de cuatro dígitos anteriores a la coma decimal como, por ejemplo, -123,456789 grados. En la tabla también deberías incluir un atributo id que sirva de clave principal y un atributo type que distinga entre restaurantes y bares.

Nota: este tutorial utiliza datos de ubicación que ya contienen la información sobre la longitud y la latitud necesaria para establecer los marcadores correspondientes. Si estás intentando utilizar tus propios datos que aún no contienen esta información, usa un servicio de codificación geográfica por lotes para convertir las direcciones en latitudes y en longitudes. Algunos sitios cometen el error de codificar de forma geográfica las direcciones cada vez que se carga una página, lo que provoca que la página tarde más tiempo en cargarse y que las codificaciones geográficas se repitan de forma innecesaria. Si es posible, se recomienda codificar siempre la información sobre la longitud y la latitud. Este enlace contiene una amplia lista de codificadores geográficos (en inglés):http://groups.google.com/group/Google-Maps-API/web/resources-non-google-geocoders.

Si prefieres interactuar con tu base de datos a través de la interfaz phpMyAdmin, a continuación se muestra una captura de pantalla de la creación de la tabla.

Si no tienes acceso a phpMyAdmin o prefieres utilizar comandos SQL, a continuación se muestra la instrucción SQL que crea la tabla (phpsqlajax_createtable.sql):

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Introducción de información en la tabla

Una vez creada la tabla, hay que completarla con información. A continuación se proporciona la información de ejemplo de diez ubicaciones de Seattle. Puedes utilizar la pestaña IMPORT, en phpMyAdmin, para importar distintos formatos de archivo, incluidos los archivos CSV (valores separados por coma). Tanto Microsoft Excel como las hojas de cálculo de Google Docs te permiten exportar al formato CSV para poder transferir los datos de una forma sencilla desde las hojas de cálculo a las tablas MySQL mediante la exportación/importación de archivos CSV.

A continuación se muestran los datos de ejemplo en formato CSV (phpsqlajax_data.csv):

Pan Africa Market,"1521 1st Ave, Seattle, WA",47.608941,-122.340145,restaurant
Buddha Thai & Bar,"2222 2nd Ave, Seattle, WA",47.613591,-122.344394,bar
The Melting Pot,"14 Mercer St, Seattle, WA",47.624562,-122.356442,restaurant
Ipanema Grill,"1225 1st Ave, Seattle, WA",47.606366,-122.337656,restaurant
Sake House,"2230 1st Ave, Seattle, WA",47.612825,-122.34567,bar
Crab Pot,"1301 Alaskan Way, Seattle, WA",47.605961,-122.34036,restaurant
Mama's Mexican Kitchen,"2234 2nd Ave, Seattle, WA",47.613975,-122.345467,bar
Wingdome,"1416 E Olive Way, Seattle, WA",47.617215,-122.326584,bar
Piroshky Piroshky,"1908 Pike pl, Seattle, WA",47.610127,-122.342838,restaurant

A continuación se muestra una captura de pantalla de las opciones de importación utilizadas para transformar esos datos en formato CSV en datos de tabla:

Si no utilizas la interfaz phpMyAdmin, a continuación se muestran las instrucciones SQL que logran los mismos resultados ( phpsqlajax_data.sql):

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Pan Africa Market', '1521 1st Ave, Seattle, WA', '47.608941', '-122.340145', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Buddha Thai & Bar', '2222 2nd Ave, Seattle, WA', '47.613591', '-122.344394', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Melting Pot', '14 Mercer St, Seattle, WA', '47.624562', '-122.356442', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Ipanema Grill', '1225 1st Ave, Seattle, WA', '47.606366', '-122.337656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Sake House', '2230 1st Ave, Seattle, WA', '47.612825', '-122.34567', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Crab Pot', '1301 Alaskan Way, Seattle, WA', '47.605961', '-122.34036', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Mama\'s Mexican Kitchen', '2234 2nd Ave, Seattle, WA', '47.613975', '-122.345467', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Wingdome', '1416 E Olive Way, Seattle, WA', '47.617215', '-122.326584', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Piroshky Piroshky', '1908 Pike pl, Seattle, WA', '47.610127', '-122.342838', 'restaurant');

Generación de archivos XML con PHP

En este punto, deberías tener una tabla llamada markers completada con datos de ejemplo. Ahora debes escribir algunas instrucciones PHP para exportar los datos de la tabla a un formato XML que el mapa pueda recuperar a través de llamadas asíncronas de JavaScript. Si nunca has escrito en PHP para establecer conexión con una base de datos MySQL, visita la página php.net y consulta las secciones mysql_connect, mysql_select_db, my_sql_query ymysql_error del manual de PHP.

Nota: algunos tutoriales pueden sugerir que escribas la página de tu mapa como un archivo PHP y que generes JavaScript para cada marcador que quieras crear, aunque esta técnica puede resultar un problema. El uso de un archivo XML como intermediario entre la base de datos y el mapa de Google permite que la página inicial se cargue de forma más rápida, que el mapa sea más flexible y que la depuración sea más fácil. Puedes verificar de forma independiente la generación de código XML desde la base de datos y el análisis de JavaScript de los archivos XML. Además, puedes incluso eliminar en cualquier momento, y por completo, la base de datos y ejecutar únicamente el mapa en función de los archivos XML estáticos.

Primero, debes colocar tu información de conexión a la base de datos en un archivo independiente. Suele ser una buena idea siempre que utilices PHP para acceder a una base de datos, ya que guarda tu información confidencial en un archivo que no te sentirás tentado a compartir. En el foro de las API de Google Maps, hemos tenido casos en los que algunos usuarios habían publicado de forma accidental su información de conexión a la base de datos cuando solo intentaban depurar su código de generación de archivos XML. El archivo debe ser similar a este, pero completado con la información de tu propia base de datos (phpsqlajax_dbinfo.php):

<?
$username="username";
$password="password";
$database="username-databaseName";
?>

Uso de las funciones domxml de PHP para generar archivos XML

Comprueba tu configuración o intenta inicializar domxml_new_doc() para determinar si el PHP de tu servidor tiene activada la función dom_xml. Si tienes acceso a las funciones dom_xml, puedes utilizarlas para crear nodos XML, añadir nodos secundarios y generar un documento XML en la pantalla. Las funciones dom_xmlestán atentas a los detalles (por ejemplo, entidades especiales de escape en el archivo XML) y facilitan la creación de archivos XML con estructuras más complejas.

En PHP, primero inicializa un nuevo documento XML y crea el nodo principal “marcadores”. A continuación, establece conexión con la base de datos, ejecuta una consulta SELECT * (seleccionar todo) en la tabla de marcadores y repite el proceso con los resultados. Para cada fila de la tabla (cada ubicación), crea un nuevo nodo XML con los atributos de la fila como atributos XML y añádelo al nodo principal. A continuación, vuelca el documento XML en la pantalla.

Nota: si tu base de datos contiene caracteres internacionales o si debes forzar la salida UTF-8, puedes utilizar utf8_encode en los datos generados.

A continuación se muestra el archivo PHP que realiza esta operación (phpsqlajax_genxml.php):

<?php
require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);

// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $node = $doc->create_element("marker");
  $newnode = $parnode->append_child($node);

  $newnode->set_attribute("name", $row['name']);
  $newnode->set_attribute("address", $row['address']);
  $newnode->set_attribute("lat", $row['lat']);
  $newnode->set_attribute("lng", $row['lng']);
  $newnode->set_attribute("type", $row['type']);
}

$xmlfile = $doc->dump_mem();
echo $xmlfile;

?>

Uso de la función echo de PHP para generar archivos XML

Si no tienes acceso a las funciones dom_xml de PHP, puedes generar simplemente el archivo XML con la función echo. Si solo utilizas la función echo, debes utilizar una función de ayudante (por ejemplo, parseToXML) que codifique correctamente una serie de entidades especiales (<,>,”,’) para que sean compatibles con el archivo XML.

En PHP, primero establece conexión con la base de datos y ejecuta la consulta SELECT * (seleccionar todos) en la tabla de marcadores. A continuación, aplica la función echo al nodo principal markers y repite el proceso con los resultados de la consulta. Para cada fila de la tabla (cada ubicación), debes aplicar la función echo al nodo XML de ese marcador, enviando primero los campos de dirección y de nombre a través de la función parseToXML en caso de que contengan entidades especiales. Termina la secuencia de comandos aplicando la función echo a la etiqueta markers de cierre.

Nota: si tu base de datos contiene caracteres internacionales o si debes forzar la salida UTF-8, puedes utilizar utf8_encode en los datos generados.

A continuación se muestra el archivo PHP que realiza esta operación (phpsqlajax_genxml2.php):

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
} 

// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

Uso de las funciones DOM de PHP para generar archivos XML

Primero, comprueba tu configuración y asegúrate de estar utilizando PHP5. Si no es así, utiliza una de las técnicas anteriores.

Nota: si tu base de datos contiene caracteres internacionales o si debes forzar la salida UTF-8, puedes utilizar utf8_encode en los datos generados.

A continuación se muestra el archivo que realiza esta operación (phpsqlajax_genxml3.php):

<?php  

require("phpsqlajax_dbinfo.php"); 

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server

$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());} 

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);  
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);  
  $newnode->setAttribute("lat", $row['lat']);  
  $newnode->setAttribute("lng", $row['lng']);  
  $newnode->setAttribute("type", $row['type']);
} 

echo $dom->saveXML();

?>

Comprobación de la correcta generación de archivos XML

Ejecuta esta secuencia de comandos PHP desde el navegador para asegurarte de que genera archivos XML válidos. Si sospechas que existe un problema de conexión con tu base de datos, es posible que te resulte más fácil depurar si eliminas la línea del archivo que establece el encabezado en el tipo de contenidotext/xml, ya que suele provocar que el navegador intente analizar los archivos XML y que no se vean correctamente los mensajes de depuración.

Si la secuencia de comandos funciona correctamente, debe aparecer código XML similar a (phpsqlajax_expectedoutput.xml):

<markers>
<marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/>
<marker name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>
<marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/>
<marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/>
<marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/>

<marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/>
<marker name="Mama's Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar"/>
<marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/>
<marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/>
</markers>

Creación del mapa

Una vez que el código XML funcione en el navegador, es hora de crear el mapa con JavaScript. Si nunca has creado un mapa de Google, prueba con algunos de los ejemplos básicos de la documentación para asegurarte de comprender los conceptos básicos de la creación de un mapa de Google.

Carga del archivo XML

Para cargar el archivo XML en la página, puedes utilizar la función GDownloadURL del API. GDownloadURL es un envoltorio de XMLHttpRequest que se utiliza para solicitar un archivo XML desde el servidor en el que reside la página HTML. El primer parámetro para GDownloadURL es la ruta de tu archivo; suele ser más fácil si el archivo XML está ubicado en el mismo directorio que el HTML, ya que puedes consultarlo por nombre de archivo. El segundo parámetro paraGDownloadURL es la función que se ejecuta al devolver el archivo XML a JavaScript.

Nota: es importante saber que GDownloadURL es asíncrona; la función de devolución de llamada no se ejecutará al ejecutar GDownloadURL. Cuanto mayor sea el archivo XML, más tiempo tardará en ejecutarse. No escribas código que esté basado en los marcadores que ya existen después de GDownloadURL, escríbelo en la función de devolución de llamada.

En la función de devolución de llamada, debes buscar todos los elementos del “marcador” del archivo XML y repetir el proceso con ellos. Recupera el nombre, la dirección, el tipo y los atributos de latitud y de longitud de cada elemento de marcador que encuentres y transmítelos a createMarker, que devuelve un marcador que puedes añadir al mapa.

GDownloadUrl("phpsqlajax_genxml.php", function(data) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    var marker = createMarker(point, name, address, type);
    map.addOverlay(marker);
  }
});

Creación de iconos personalizados

Puedes utilizar la clase GIcon para definir los iconos personalizados que se pueden asignar posteriormente a los marcadores. Para empezar, declara dos objetosGIcon (iconBlue e iconRed) y define sus propiedades.

Advertencia: puedes especificar menos propiedades que en el ejemplo, pero si lo haces, te arriesgas a que se produzcan errores desconocidos.

A continuación, crea un conjunto asociativo que relacione cada GIcon con uno de los tipos de tus cadenas: “restaurante” o “bar”. Esto permite que se pueda hacer referencia fácilmente a los iconos al crear marcadores a partir del archivo XML.

    var iconBlue = new GIcon();
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;

Creación de marcadores y de ventanas de información

Debes haber incluido todo el código de creación de marcadores en una función createMarker. Si utilizas el tipo como la clave del conjunto asociativo que se definió de forma general, puedes recuperar el icono GIcon apropiado e incluirlo en el constructor GMarker. A continuación, crea el archivo HTML que quieres que aparezca en la ventana de información concatenando el nombre, la dirección y algunas etiquetas para resaltar el nombre.

Sugerencia: algunos tutoriales te enseñan a almacenar descripciones en formato HTML en tu base de datos, pero si haces esto, debes ocuparte de las entidades HTML de escape y quedarás vinculado a ese código HTML. Si esperas a recuperar cada atributo de forma independiente en JavaScript, puedes probar el código HTML en el lado cliente y previsualizar rápidamente el nuevo formato.

Tras crear la cadena HTML, añade un detector de eventos al marcador, de forma que al hacer clic en él, aparezca una ventana de información.

function createMarker(point, name, address, type) {
  var marker = new GMarker(point, customIcons[type]);
  var html = "<b>" + name + "</b> <br/>" + address;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

Unión de todos los elementos

A continuación se muestra la página web que une los marcadores, los iconos y los archivos XML. Cuando la página se carga, se ejecuta la función load. Esta función configura el mapa y, a continuación, ejecuta GDownloadUrl. Asegúrate de haber incluido GDownloadUrl en el archivo que genera el código XML y de poder previsualizar ese código XML en el navegador.

A continuación se muestra el código HTML completo que permite esta operación (phpsqlajax_map.htm):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + MySQL/PHP Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon();
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(47.614495, -122.341861), 13);

        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>" + name + "</b> <br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>

  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Cuando se haya cargado, el mapa debe ser similar a: