Uso de PHP/MySQL con Google Maps

Pamela Fox, equipo de Google Geo Con contribuciones de Lary Stucker, desarrollador del API de Google Maps Abril de 2007 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, tendrs 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 asignacin de iconos distintivos a los marcadores. Al hacer clic, aparecer sobre el marcador una ventana con informacin de la direccin y del nombre. El tutorial se divide en los siguientes pasos: y y y y Creacin de la tabla Introduccin de informacin en la tabla Generacin de archivos XML con PHP Creacin del mapa

Creacin de la tabla

Al crear la tabla MySQL, presta especial atencin a los atributos lat y lng. Con las funciones actuales de zoom de Google Maps, solo necesitas seis dgitos de precisin despus de la coma decimal. Para mantener al mnimo el espacio de almacenamiento necesario para nuestra tabla, puedes especificar que los atributos latitud (lat) y longitud (lng) sean valores "float" con un tamao de (10,6). De esta forma, los campos podrn almacenar seis dgitos despus de la coma decimal ms un mximo de cuatro dgitos anteriores a la coma decimal como, por ejemplo, -123,456789 grados. En la tabla tambin deberas 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 ubicacin que ya contienen la informacin sobre la longitud y la latitud necesaria para establecer los marcadores correspondientes. Si ests intentando utilizar tus propios datos que an no contienen esta informacin, usa un servicio de codificacin geogrfica por lotes para convertir las direcciones en latitudes y en longitudes. Algunos sitios cometen el error de codificar de forma geogrfica las direcciones cada vez que se carga una pgina, lo que provoca que la pgina tarde ms tiempo en cargarse y que las codificaciones geogrficas se repitan de forma innecesaria. Si es posible, se recomienda codificar siempre la informacin sobre la longitud y la latitud.

Este enlace contiene una amplia lista de codificadores geogrficos (en ingls): http://groups.google.com/group/Google-Maps-API/web/resources-non-google-geocoders.

Uso de PHP/MySQL con Google Maps

Si prefieres interactuar con tu base de datos a travs de la interfaz phpMyAdmin, a continuacin se muestra una captura de pantalla de la creacin de la tabla. Si prefieres interactuar con tu base de datos a travs de la interfaz phpMyAdmin, a continuacin se muestra una captura de pantalla de la creacin de la tabla.

Si no tienes acceso a phpMyAdmin o prefieres utilizar comandos SQL, a continuacin se muestra la instruccin 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 ;

Introduccin de informacin en la tabla

Una vez creada la tabla, hay que completarla con informacin. A continuacin se proporciona la informacin de ejemplo de diez ubicaciones de Seattle. Puedes utilizar la pestaa IMPORT, en phpMyAdmin, para importar distintos formatos de archivo, incluidos los archivos CSV (valores separados por coma). Tanto Microsoft Excel como las hojas de clculo de Google Docs te permiten exportar al formato CSV para poder transferir los datos de una forma sencilla desde las hojas de clculo a las tablas MySQL mediante la exportacin/importacin de archivos CSV. A continuacin 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

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 2 de 11

Uso de PHP/MySQL con Google Maps

A continuacin se muestra una captura de pantalla de las opciones de importacin utilizadas para transformar esos datos en formato CSV en datos de tabla:

Si no utilizas la interfaz phpMyAdmin, a continuacin 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');

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 3 de 11

Uso de PHP/MySQL con Google Maps

Generacin de archivos XML con PHP

En este punto, deberas 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 travs de llamadas asncronas de JavaScript. Si nunca has escrito en PHP para establecer conexin con una base de datos MySQL, visita la pgina php.net y consulta las secciones mysql_connect, mysql_select_db, my_sql_query y mysql_error del manual de PHP. Nota: algunos tutoriales pueden sugerir que escribas la pgina de tu mapa como un archivo PHP y que
generes JavaScript para cada marcador que quieras crear, aunque esta tcnica 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 pgina inicial se cargue de forma ms rpida, que el mapa sea ms flexible y que la depuracin sea ms fcil. Puedes verificar de forma independiente la generacin de cdigo XML desde la base de datos y el anlisis de JavaScript de los archivos XML. Adems, puedes incluso eliminar en cualquier momento, y por completo, la base de datos y ejecutar nicamente el mapa en funcin de los archivos XML estticos.

Primero, debes colocar tu informacin de conexin 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 informacin confidencial en un archivo que no te sentirs tentado a compartir. En el foro de las API de Google Maps, hemos tenido casos en los que algunos usuarios haban publicado de forma accidental su informacin de conexin a la base de datos cuando solo intentaban depurar su cdigo de generacin de archivos XML. El archivo debe ser similar a este, pero completado con la informacin 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 configuracin o intenta inicializar domxml_new_doc() para determinar si el PHP de tu servidor tiene activada la funcin dom_xml . Si tienes acceso a las funciones dom_xml , puedes utilizarlas para crear nodos XML, aadir nodos secundarios y generar un documento XML en la pantalla. Las funciones dom_xml estn atentas a los detalles (por ejemplo, entidades especiales de escape en el archivo XML) y facilitan la creacin de archivos XML con estructuras ms complejas. En PHP, primero inicializa un nuevo documento XML y crea el nodo principal "marcadores". A continuacin, establece conexin 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 ubicacin), crea un nuevo nodo XML con los atributos de la fila como atributos XML y adelo al nodo principal. A continuacin, 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.

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 4 de 11

Uso de PHP/MySQL con Google Maps

A continuacin se muestra el archivo PHP que realiza esta operacin (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 funcin 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 funcin echo. Si solo utilizas la funcin echo , debes utilizar una funcin 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 conexin con la base de datos y ejecuta la consulta SELECT * (seleccionar todos) en la tabla de marcadores. A continuacin, aplica la funcin echo al nodo principal markers y repite el proceso con los resultados de la consulta. Para cada fila de la tabla (cada ubicacin), debes aplicar la funcin echo al nodo XML de ese marcador, enviando primero los campos de direccin y de nombre a travs de la funcin parseToXML en caso de que contengan entidades especiales. Termina la secuencia de comandos aplicando la funcin echo a la etiqueta markers de cierre. http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html Pgina 5 de 11

Uso de PHP/MySQL con Google Maps

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 continuacin se muestra el archivo PHP que realiza esta operacin (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>'; ?>

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 6 de 11

Uso de PHP/MySQL con Google Maps

Uso de las funciones DOM de PHP para generar archivos XML

Primero, comprueba tu configuracin y asegrate de estar utilizando PHP5. Si no es as, utiliza una de las tcnicas anteriores. En PHP, primero inicializa un nuevo documento XML y crea el nodo principal "marcadores". A continuacin, establece conexin 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 ubicacin), crea un nuevo nodo XML con los atributos de la fila como atributos XML y adelo al nodo principal. A continuacin, 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 continuacin se muestra el archivo que realiza esta operacin (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();

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 7 de 11

Uso de PHP/MySQL con Google Maps

Comprobacin de la correcta generacin de archivos XML

Ejecuta esta secuencia de comandos PHP desde el navegador para asegurarte de que genera archivos XML vlidos. Si sospechas que existe un problema de conexin con tu base de datos, es posible que te resulte ms fcil depurar si eliminas la lnea del archivo que establece el encabezado en el tipo de contenido text/xml , ya que suele provocar que el navegador intente analizar los archivos XML y que no se vean correctamente los mensajes de depuracin. Si la secuencia de comandos funciona correctamente, debe aparecer cdigo 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"/> name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>

<marker

</markers>

Creacin del mapa

Una vez que el cdigo 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 bsicos de la documentacin para asegurarte de comprender los conceptos bsicos de la creacin de un mapa de Google.

Carga del archivo XML Para cargar el archivo XML en la pgina, puedes utilizar la funcin 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 pgina HTML. El primer parmetro para GDownloadURL es la ruta de tu archivo; suele ser ms fcil si el archivo XML est ubicado en el mismo directorio que el HTML, ya que puedes consultarlo por nombre de archivo. El segundo parmetro para GDownloadURL es la funcin que se ejecuta al devolver el archivo XML a JavaScript. Nota: es importante saber que GDownloadURL es asncrona; la funcin de devolucin de llamada no se
ejecutar al ejecutar GDownloadURL. Cuanto mayor sea el archivo XML, ms tiempo tardar en ejecutarse. No escribas cdigo que est basado en los marcadores que ya existen despus de GDownloadURL, escrbelo en la funcin de devolucin de llamada.

En la funcin de devolucin de llamada, debes buscar todos los elementos del "marcador" del archivo XML y repetir el proceso con ellos. Recupera el nombre, la direccin, el tipo y los atributos de latitud y de longitud de cada elemento de marcador que encuentres y transmtelos a createMarker, que devuelve un marcador que puedes aadir al mapa.

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 8 de 11

Uso de PHP/MySQL con Google Maps

GDownloadUrl("phpsqlajax_genxml.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for( var i var var var = 0; i < markers.length; i++ ){ name = markers[i].getAttribute("name"); address = markers[i].getAttribute("address"); 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); } });

Creacin 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 continuacin, 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 fcilmente 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;

Creacin de marcadores y de ventanas de informacin

Debes haber incluido todo el cdigo de creacin de marcadores en una funcin 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 continuacin, crea el archivo HTML que quieres que aparezca en la ventana de informacin concatenando el nombre, la direccin y algunas etiquetas para resaltar el nombre.

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 9 de 11

Uso de PHP/MySQL con Google Maps

Sugerencia: algunos tutoriales te ensean a almacenar descripciones en formato HTML en tu base de datos, pero si haces esto, debes ocuparte de las entidades HTML de escape y quedars vinculado a ese cdigo HTML. Si esperas a recuperar cada atributo de forma independiente en JavaScript, puedes probar el cdigo HTML en el lado cliente y previsualizar rpidamente el nuevo formato. Tras crear la cadena HTML, aade un detector de eventos al marcador, de forma que al hacer clic en l, aparezca una ventana de informacin.

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

Unin de todos los elementos

A continuacin se muestra la pgina web que une los marcadores, los iconos y los archivos XML. Cuando la pgina se carga, se ejecuta la funcin load. Esta funcin configura el mapa y, a continuacin, ejecuta GDownloadUrl. Asegrate de haber incluido GDownloadUrl en el archivo que genera el cdigo XML y de poder previsualizar ese cdigo XML en el navegador. A continuacin se muestra el cdigo HTML completo que permite esta operacin (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? 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);

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 10 de 11

Uso de PHP/MySQL con Google Maps

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>

http://code.google.com/intl/es-ES/apis/maps/articles/phpsqlajax.html

Pgina 11 de 11