Google Maps: introducción

¿Qué son Google Maps?

Google Maps es un servicio de mapas web gratuito de Google que proporciona varios tipos de información geográfica. Usando Google Maps, uno puede.

Busque lugares u obtenga direcciones de un lugar a otro.
Vea y navegue a través de imágenes panorámicas horizontales y verticales a nivel de calle de varias ciudades del mundo.
Obtenga información específica como el tráfico en un punto en particular.

Google Maps proporciona una API con la que puede personalizar los mapas y la información que se muestra en ellos. Este capítulo explica cómo cargar un mapa de Google simple en su página web usando HTML y JavaScript.

Pasos para cargar el mapa en una página web

Siga los pasos que se indican a continuación para cargar un mapa en su página web:

Paso 1: crea una página HTML

Cree una página HTML básica con etiquetas de encabezado y cuerpo como se muestra a continuación:

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Paso 2: carga la API

Cargue o incluya la API de Google Maps utilizando la etiqueta de secuencia de comandos como se muestra a continuación:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Paso 3: crea el contenedor

Para contener el mapa, tenemos que crear un elemento contenedor, generalmente se usa la etiqueta <div> (un contenedor genérico) para este propósito. Cree un elemento contenedor y defina sus dimensiones como se muestra a continuación:

<div id = "sample" style = "width:900px; height:580px;"></div>

Paso 4: Opciones de mapa

Antes de inicializar el mapa, tenemos que crear un mapOptionsobjeto (se crea como un literal) y establece valores para las variables de inicialización del mapa. Un mapa tiene tres opciones principales, a saber,centre, zoomy maptypeid.

centre- Bajo esta propiedad, tenemos que especificar la ubicación donde queremos centrar el mapa. Para pasar la ubicación, tenemos que crear unLatLng objeto pasando la latitud y las longitudes de la ubicación requerida al constructor.
zoom - Bajo esta propiedad, tenemos que especificar el nivel de zoom del mapa.
maptypeid- Bajo esta propiedad, tenemos que especificar el tipo de mapa que queremos. Los siguientes son los tipos de mapas proporcionados por Google:
- ROADMAP (mapa 2D normal, predeterminado)
- SATÉLITE (mapa fotográfico)
- HÍBRIDO (combinación de otros dos o más tipos)
- TERRENO (mapa con montañas, ríos, etc.)

Dentro de una función, digamos, loadMap(), cree el objeto mapOptions y establezca los valores necesarios para center, zoom y mapTypeId como se muestra a continuación.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Paso 5: crear un objeto de mapa

Puede crear un mapa creando una instancia de la clase JavaScript llamada Map. Mientras crea una instancia de esta clase, debe pasar un contenedor HTML para contener el mapa y las opciones de mapa para el mapa requerido. Cree un objeto de mapa como se muestra a continuación.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Paso 6: carga el mapa

Finalmente cargue el mapa llamando al método loadMap () o agregando un detector DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Ejemplo

El siguiente ejemplo muestra cómo cargar la hoja de ruta de la ciudad llamada Vishakhapatnam con un valor de zoom de 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida: