Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Usar MySQL y PHP con Google Maps

Información general

En este instructivo, aprenderás a mostrar información de una base de datos de MySQL en un mapa de Google usando la Google Maps JavaScript API. Está orientado a personas con conocimientos intermedios de MySQL, PHP y XML.

En el mapa que se incluye en este instructivo, se muestran dos tipos de marcadores para diferenciar entre la ubicación de restaurantes y bares respectivamente. Una base de datos en MySQL almacena información sobre ubicaciones de marcadores individuales como el tipo de sitio (restaurante o bar), su nombre, dirección y coordenadas geográficas. El mapa obtiene esta información de la base de datos, a través de un archivo XML que actúa como intermediario entre la base de datos y el mapa. Puedes usar declaraciones de PHP para exportar información de marcadores de la base de datos a un archivo XML.

Haz clic en el marcador en el mapa a continuación para visualizar una ventana de información con el nombre y la dirección del sitio. Los marcadores tienen las etiquetas “R” o “B” y te muestran las ubicaciones de restaurantes y bares respectivamente.

En el siguiente ejemplo, se muestra el código completo que necesitas para crear este mapa.

      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Pruébalo

Desplázate a la esquina superior derecha del bloque de código para copiar el código o abrirlo en JSFiddle.

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Primeros pasos

Instala y configura un servidor MySQL con PHP en tu máquina.

Crear un tabla en MySQL

Crea una tabla en MySQL que contenga atributos de los marcadores que se encuentran en el mapa, como el marcador id, name, address, lat, lngy type.

El atributo id cumple la función de clave principal, y el atributo type distingue entre restaurantes y bares.

Para mantener el espacio de almacenamiento para tu tabla en su capacidad mínima, puedes especificar los atributos lat y lng para que sean elementos flotantes de tamaño (10,6). Esto permite que los campos puedan almacenar 6 dígitos después del decimal y hasta 4 dígitos antes del decimal.

Puedes interactuar con la base de datos de MySQL a través de la interfaz phpMyAdmin. En la siguiente captura de pantalla se muestra la configuración de la tabla en phpMyAdmin.

También puedes usar comandos SQL para crear la tabla, como en la declaración SQL que se muestra a continuación.

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 ;

Completar la tabla

Puedes importar los datos de los marcadores a la base de datos SQL usando la funcionalidad de importación de la interfaz phpMyAdmin, que te permite importar datos en diferentes formatos.

A continuación, te mostramos los datos de los marcadores para el mapa que abordamos en este instructivo en formato .csv.

Love.Fish,"580 Darling Street, Rozelle, NSW",-33.861034,151.171936,restaurant
Young Henrys,"76 Wilford Street, Newtown, NSW",-33.898113,151.174469,bar
Hunter Gatherer,"Greenwood Plaza, 36 Blue St, North Sydney NSW ",-33.840282,151.207474,bar
The Potting Shed,"7A, 2 Huntley Street, Alexandria, NSW",-33.910751,151.194168,bar
Nomad,"16 Foster Street, Surry Hills, NSW",-33.879917,151.210449,bar
Three Blue Ducks,"43 Macpherson Street, Bronte, NSW",-33.906357,151.263763,restaurant
Single Origin Roasters,"60-64 Reservoir Street, Surry Hills, NSW",-33.881123,151.209656,restaurant
Red Lantern,"60 Riley Street, Darlinghurst, NSW",-33.874737,151.215530,restaurant

También puedes usar los comandos SQL que se indican a continuación para importar los datos de los marcadores a la tabla SQL.

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Love.Fish', '580 Darling Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Young Henrys', '76 Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Hunter Gatherer', 'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Potting Shed', '7A, 2 Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Nomad', '16 Foster Street, Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Three Blue Ducks', '43 Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Single Origin Roasters', '60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Red Lantern', '60 Riley Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

Exportar datos como XML usando PHP

En este momento, ya debes tener una tabla llamada markers que contenga los datos de los marcadores del mapa. En esta sección, aprenderás a exportar los datos de la tabla de la base de datos SQL en un formato XML usando parámetros PHP. El mapa puede usar el archivo XML para recuperar los datos de los marcadores a través de llamadas JavaScript asincrónicas.

El uso de un archivo XML como intermediario entre tu base de datos y tu mapa de Google permite cargar la página iniciar más rápido y una aplicación de mapa más flexible. Esto facilita la depuración, ya que puedes verificar de forma independiente el formato de salida XML de la base de datos, y el procesamiento del XML por parte de JavaScript. También puedes ejecutar el mapa en su totalidad en función de archivos XML estáticos únicamente, sin usar la base de datos MySQL.

Si nunca usaste PHP para conectarte a una base de datos MySQL, visita php.net y lee sobre mysql_connect, mysql_select_db, my_sql_query y mysql_error.

Puedes usar cualquiera de las tres técnicas diferentes que se indican a continuación para extraer datos de la tabla SQL en formato XML con PHP.

Cuando se usa un navegador público para acceder a una base de datos usando archivos PHP, es importante asegurarte de que tus credenciales de la base de datos sean seguras. Puedes hacer esto disponiendo tu información de conexión a la base de datos en un archivo PHP independiente del archivo que contiene el código PHP principal. El archivo con tus credenciales debe ser como el que se muestra a continuación, pero con tu información de la base de datos.

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

Usar funciones DOM XML de PHP para obtener el formato XML

Las funciones DOM XML de PHP abordan detalles como evitar entidades especiales en el XML y facilitan la creación del XML con estructuras más complejas. Puedes usar funciones DOM XML para crear nodos XML, anexar nodos secundarios y reproducir un documento XML en la pantalla. Para determinar si el PHP de tu servidor tiene la funcionalidad DOM XML habilitada, comprueba tu configuración o intenta inicializar domxml_new_doc().

A continuación, te mostramos el archivo PHP que se conecta con la base de datos MySQL y vuelca el XML en el navegador.

<?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;

?>

En el archivo anterior, el código PHP primero inicializa un documento XML nuevo y crea el nodo principal “markers”. Luego se conecta a la base de datos, ejecuta una consulta SELECT * (seleccionar todos) en la tabla de marcadores y recorre los resultados. Para cada fila de la tabla (cada ubicación), el código crea un nuevo nodo XML con los atributos de fila como atributos XML, y lo anexa al nodo principal. La última parte del código vuelca el XML en la pantalla del navegador.

Nota: Si tu base de datos contiene caracteres internacionales o necesitas forzar la codificación UTF-8, puedes usar utf8_encode para el formato de salida de los datos.

Usar la función echo de PHP para obtener el formato XML

Si no tienes acceso a las funciones dom_xml de PHP, puedes obtener el XML con la función echo. Cuando solo uses la función echo, usa una función de ayuda (p. ej., parseToXML) para codificar correctamente algunas entidades especiales (<,>,",') a fin de poder incluirlas en el XML.

A continuación, te mostramos el archivo PHP que se conecta con la base de datos MySQL y vuelca el XML en el navegador.

<?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>';

?>

El código anterior se conecta a la base de datos y ejecuta la consulta SELECT * (seleccionar todos) en la tabla de marcadores. Luego imita el nodo principal markers y recorre los resultados de la consulta. Luego el código imita el nodo XML para el marcador en cada fila de la tabla (para cada ubicación). Esto envía primero los campos de nombre y dirección a través de la función parseToXML en caso de que contengan entidades especiales. La secuencia de comandos finaliza con la imitación de la etiqueta de cierre markers.

Nota: Puedes usar utf8_encode en el formato de salida de los datos XML si tu base de datos contiene caracteres internacionales o si necesitas forzar la codificación UTF-8.

Usar funciones DOM de PHP para obtener el formato XML

A continuación, te mostramos el archivo PHP que se conecta con la base de datos MySQL y vuelca el XML en el navegador.

<?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();

?>

El código anterior inicializa un documento XML nuevo y crea el nodo principal “markers”. Luego se conecta a la base de datos, ejecuta una consulta SELECT * (seleccionar todos) en la tabla de marcadores y recorre los resultados. El código luego crea un nodo XML para cada fila de la tabla (para cada ubicación) con los atributos de fila como atributos XML, y lo anexa al nodo principal. A continuación, vuelca el XML obtenido en la pantalla del navegador.

Nota: Si tu base de datos contiene caracteres internacionales o necesitas forzar la codificación UTF-8, puedes usar utf8_encode para el formato de salida de los datos.

Comprobar que funcione el formato XML

Para confirmar que la secuencia de comandos PHP produzca XML válidos, llama desde tu navegador al archivo de secuencia de comandos de php que creaste para ver el formato XML, como se muestra a continuación.

<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW" lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria, NSW" lat="-33.910751" lng="151.194168" type="bar"/>

<marker name="Nomad" address="16 Foster Street, Surry Hills, NSW" lat="-33.879917" lng="151.210449" type="bar"/>
<marker name="Three Blue Ducks" address="43 Macpherson Street, Bronte, NSW" lat="-33.906357" lng="151.263763" type="restaurant"/>
<marker name="Single Origin Roasters" address="60-64 Reservoir Street, Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/>
<marker name="Red Lantern" address="60 Riley Street, Darlinghurst, NSW" lat="-33.874737" lng="151.215530" type="restaurant"/>
</markers>

Si tu navegador no muestra los datos de los marcadores de tu base de datos en formato XML, intenta realizar la depuración eliminando la línea del primer archivo que fija el encabezado en el tipo de contenido text/xml. Esa línea puede hacer que el navegador intente analizar XML y no permite visualizar los mensajes de depuración.

Crear el mapa

En esta sección, se muestra la manera en que puedes desarrollar el ejemplo de mapa que se incluye en este instructivo usando JavaScript y el archivo en formato XML. Lee la documentación para obtener más información sobre los aspectos básicos de la creación de un mapa de Google.

Crea un archivo nuevo en un editor de texto y guárdalo como index.html. Lee las secciones que siguen para comprender el código que puedes agregar a este archivo.

Cargar el archivo XML

Para cargar el archivo XML en la página, puedes aprovechar el objeto XMLHttpRequest proporcionado por el navegador. Este objeto te permite recuperar un archivo que reside en el mismo dominio que la página web desde donde se realiza la solicitud, y es la base de la programación “AJAX”.

Define tu propia función para cargar el archivo y llámala downloadUrl(). La función adopta dos parámetros:

  1. url especifica la ruta de acceso a tu archivo XML o a la secuencia de comandos PHP que genera el archivo, según desees actualizar el archivo XML de forma dinámica cuando tu base de datos cambie. El mapa que se incluye en este instructivo llama a un archivo XML estático para obtener datos sobre los marcadores.
    Generalmente, es más fácil que este archivo XML resida en el mismo directorio que el archivo HTML, de modo que puedas hacer referencia a él por nombre de archivo.
  2. callback indica la función a la que llama la secuencia de comandos cuando el XML regresa a JavaScript.

El código a continuación muestra la declaración de la función.

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

Nota: Debido a que XMLHttpRequest es asincrónico, la función de callback inicializa la función downloadURL en función del tamaño del archivo XML. Cuanto más grande sea tu archivo XML, más puede demorar. Por este motivo, la mejor opción sería no colocar después de downloadUrl código que dependa de los marcadores que se encuentren dentro de la función de callback. En su lugar, puedes disponer ese código dentro de la función de callback.

Ahora que definiste la función, puedes llamarla desde tu código, y pasar el nombre de tu archivo PHP y la función callback. El mapa que se incluye en este instructivo llama a un archivo XML estático para obtener datos sobre los marcadores, como se muestra en el siguiente código.


downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var icon = customLabel[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      label: icon.label
    });

Crear marcadores personalizados

En el siguiente código, se muestra la manera de agregar etiquetas personalizadas para tus marcadores creando primero una matriz asociativa. Esto asocia tus etiquetas con las strings type del marcador restaurant o bar, lo cual hace que sea fácil hacer referencia a las etiquetas cuando creas marcadores a partir del archivo XML.

var customLabel = {
  restaurant: {
    label: 'R'
  },
  bar: {
    label: 'B'
  }
};

Crear marcadores y ventanas de información

Al crear marcadores, puedes obtener las etiquetas adecuadas para los marcadores usando el objeto type como la clave para la matriz customLabel asociada. Envía la propiedad .label como una opción del constructor google.maps.Marker.

A continuación, crea el HTML que desees mostrar en la ventana de información concatenando las etiquetas de nombre, dirección y HTML para enfatizar el nombre.

Si almacenas descripciones con formato HTML en tu base de datos, es posible que debas lidiar con el escape de entidades HTML y estar limitado a ese formato de salida HTML. Si esperas a recuperar cada atributo por separado en JavaScript, puedes usar libremente el formato HTML en el cliente y generar rápidamente una vista previa del nuevo formato.

Después de construir la string en formato HTML, el código que se muestra a continuación agrega un receptor de eventos al marcador, que muestra una ventana de información cuando se hace clic en él.

marker.addListener('click', function() {
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
});

Revisión general

Abre el archivo index.html en un navegador. Cuando se carga la página, la función initMap configura el mapa y luego llama a la función downloadUrl. Esta función recorre todos los elementos del marcador y recupera los atributos de nombre, dirección, tipo y latitud y longitud para cada elemento del marcador.
Luego, el código crea marcadores, agrega los marcadores al mapa y vincula una ventana de información a cada marcador para mostrar una descripción cuando se hace clic en ellos.

Más información

Si deseas representar marcadores en un mapa usando tus propios datos de ubicación, puedes usar un servicio de geocodificación por lotes para convertir direcciones en latitudes y longitudes para tus marcadores.

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.