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

Superposiciones de suelo

  1. Introducción
  2. Agregar una superposición de suelo
  3. Eliminar una superposición de suelo

Introducción

Las superposiciones son objetos del mapa que están relacionados con coordenadas de latitud y longitud, por lo que se mueven cuando arrastras el mapa o le aplicas zoom. Si deseas disponer una imagen en un mapa, puedes usar el objeto GroundOverlay.

Para obtener información sobre otros tipos de superposiciones, consulta Cómo dibujar en el mapa.

Agregar una superposición de suelo

El constructor de un objeto GroundOverlay especifica una URL de una imagen y el objeto LatLngBounds de esta como parámetros. La imagen se representará en el mapa, se adecuará a los límites establecidos y se conformará usando la proyección del mapa.

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

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

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
<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 uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

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

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

Ver el ejemplo (groundoverlay-simple.html).

Eliminar una superposición de suelo

Para eliminar una superposición de un mapa, llama al método setMap() de esta y pasa el valor null. Ten en cuenta que al llamar a este método no se elimina la superposición. Simplemente se la elimina del mapa. Si, como alternativa, deseas eliminar la superposición debes eliminarla del mapa y luego fijar para ella el valor null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Ver el ejemplo (overlay-remove.html).

Enviar comentarios sobre...

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