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

Marcadores

Introducción

Los marcadores identifican una ubicación en un mapa. De manera predeterminada, los marcadores llevan una imagen estándar. En estos pueden mostrarse imágenes personalizadas. En este caso, generalmente reciben la denominación de “iconos”. Los marcadores y los iconos son objetos del tipo Marker. Puedes configurar un icono personalizado dentro del constructor del marcador, o bien llamando al método setIcon() en el marcador. A continuación, puedes obtener más información sobre la personalización de imágenes de marcadores.

En términos generales, los marcadores son una clase de superposición. Para obtener información sobre otros tipos de superposiciones, consulta Cómo dibujar en el mapa.

Los marcadores están diseñados para ser interactivos. Por ejemplo, de manera predeterminada reciben eventos 'click' a fin de que puedas agregar un receptor de eventos para activar una ventana de información en la que se muestren datos personalizados. Puedes permitir que los usuarios muevan un marcador del mapa fijando la propiedad draggable en el valor true. Para obtener más información acerca de los marcadores que pueden arrastrarse, consulta la sección siguiente.

Agregar un marcador

El constructor google.maps.Marker toma un único literal de objeto Marker options, que especifica las propiedades iniciales del marcador.

Los campos siguientes tienen particular importancia y normalmente se configuran al construir un marcador:

  • position (obligatorio) especifica un objeto LatLng que identifica la ubicación inicial del marcador. Una manera de recuperar un LatLng consiste en usar el servicio de geocodificación.
  • map (opcional) especifica el Map en el cual debe ubicarse el marcador. Si no especificas el mapa al construir el marcador, este último se crea y no se adjunta al mapa (ni se muestra en él). Puedes agregar el marcador posteriormente llamando al método setMap() de este.

En el ejemplo siguiente se agrega un marcador simple a un mapa en Uluru, en la región central de Australia:

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
<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>
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

En el ejemplo anterior, al construirse, se dispone el marcador en el mapa con la propiedad map de las opciones de este. También puedes agregar el marcador al mapa en forma directa usando el método setMap(), como se muestra en el ejemplo siguiente:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

La propiedad title del marcador aparecerá como información sobre herramientas.

Si no deseas pasar Marker options en el constructor del marcador, como alternativa pasa un objeto {} vacío en el último argumento del constructor.

Ver el ejemplo (marker-simple.html).

Eliminar un marcador

Para eliminar un marcador del mapa, llama al método setMap() y pasa null como argumento.

marker.setMap(null);

Ten en cuenta que con el método anterior no se elimina el marcador. Simplemente se retira del mapa. Si en realidad deseas eliminar el marcador, debes hacerlo desde el mapa y luego fijar el valor del propio marcador en null.

Si deseas administrar un conjunto de marcadores, debes crear un conjunto que los contenga. Si usas este conjunto, puedes además llamar al método setMap() en cada marcador del conjunto cuando debas eliminar los marcadores. Puedes eliminar los marcadores eliminándolos del mapa y fijando, luego, la propiedad length en el valor 0, con lo cual se eliminan todas las referencias de los marcadores.

Ver el ejemplo (marker-remove.html).

Animar un marcador

Puedes aplicar animación a los marcadores para que exhiban movimiento dinámico en varias circunstancias diferentes. Para especificar la manera en que se anima un marcador, usa su propiedad animation, del tipo google.maps.Animation. Se admiten los siguientes valores Animation:

  • DROP indica que el marcador debe desplazarse hacia abajo, desde la parte superior del mapa hasta su ubicación final, al disponerse en él por primera vez. La animación se detendrá una vez que el marcador quede en reposo y se restablecerá el valor null de animation. Este tipo de animación generalmente se especifica durante la creación de Marker.
  • BOUNCE indica que el marcador debe rebotar en el lugar. Los marcadores que rebotan continuarán haciéndolo hasta que se fije de manera explícita la propiedad animation en el valor null.

Puedes iniciar una animación en un marcador existente llamando al método setAnimation() en el objeto Marker.

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
<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>
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Ver el ejemplo (marker-animations.html).

Si dispones de muchos marcadores, probablemente no te convenga disponerlos a todos al mismo tiempo en el mapa. Puedes usar el método setTimeout() para espaciar las animaciones de tus marcadores usando un patrón como el que se muestra a continuación:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Ver el ejemplo (marker-animations-iteration.html).

Personalizar la imagen de un marcador

Si deseas mostrar una letra o un número en un cargador, puedes usar una etiqueta de marcador. Si debes aplicar más ajustes de personalización, puedes determinar que se muestre un icono en lugar de la imagen de marcador predeterminada. Definir un icono implica configurar varias propiedades que determinan el comportamiento visual del marcador.

En las secciones siguientes, se describen etiquetas de marcadores, iconos simples, iconos complejos y símbolos (iconos vectoriales).

Etiquetas de marcadores

Una etiqueta de marcador es una letra o un número que aparece dentro de un marcador. En la imagen del marcador de esta sección se muestra una etiqueta de marcador con la letra “B” en ella. Puedes especificar una como una cadena o un objeto MarkerLabel que incluya una cadena y otras propiedades de etiquetas.

Al crear un marcador, puedes especificar una propiedad label en el objeto MarkerOptions. También puedes llamar a setLabel() en el objeto Marker para configurar la etiqueta en un marcador existente.

En el ejemplo siguiente se muestran marcadores etiquetados cuando el usuario hace clic en la ubicación seleccionada del mapa.

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
<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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Ver el ejemplo (marker-labels.html).

Iconos simples

En el caso más básico, un icono puede simplemente indicar una imagen en lugar del icono predeterminado del pin de Google Maps. Para especificar un icono como este, configura la propiedad icon de modo que incluya la URL de una imagen. Google Maps JavaScript API ajustará automáticamente el tamaño del ícono.

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}
<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>
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}

Ver el ejemplo (icon-simple.html).

Iconos complejos

Probablemente también te convenga especificar formas complejas, para indicar regiones seleccionables, y la manera en que los iconos deben aparecer respecto de otras superposiciones (su “ordenamiento en forma de pila”). Para los iconos que tienen estas especificaciones deben configurarse las propiedades icon en un objeto de tipo Icon.

Los objetos Icon definen una imagen. También definen las propiedades size, origin (si la imagen que deseas forma parte de una imagen más grande, por ejemplo, en el caso de un sprite) y anchor del icono, donde debería ubicarse la zona activa (según el origen).

Si usas una etiqueta con un marcador personalizado, puedes posicionarla con la propiedad labelOrigin en el objeto Icon.

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: -33.9, lng: 151.2}
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}
<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>
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: -33.9, lng: 151.2}
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

Ver el ejemplo (icon-complex.html).

Cómo convertir objetos MarkerImage al tipo Icon

Hasta la versión 3.10 de la Google Maps JavaScript API, los iconos complejos se definieron como objetos MarkerImage. El literal de objeto Icon se agregó en la versión 3.10 y reemplaza a MarkerImage a partir de la versión 3.11. Los literales de objeto Icon admiten los mismos parámetros que MarkerImage, lo que te permite convertir fácilmente un objeto MarkerImage en un literal de objeto Icon mediante la eliminación de un constructor, la agrupación de los parámetros anteriores en objetos vacíos {} y la incorporación de los nombres de cada parámetro. Por ejemplo:

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

debe convertirse en:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Símbolos

Además de las imágenes de trama, un marcador admite la visualización de trazados vectoriales denominados Symbols. Para mostrar un trazado vectorial, pasa un literal de objeto Symbol con la ruta de acceso deseada a la propiedad icon del marcador. Puedes usar una de las rutas de acceso predefinidas en google.maps.SymbolPath o definir una ruta de acceso personalizada usando la notación de ruta de acceso SVG.

Para obtener más información, consulta la documentación relacionada con símbolos.

Hacer que un marcador pueda arrastrarse

Para que los usuarios puedan arrastrar un marcador hasta una ubicación diferente del mapa, fija draggable en el valor true en las opciones del marcador.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Enviar comentarios sobre...

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