Google Maps - Guía rápida

¿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 de todo el 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 mantener 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:

En el capítulo anterior, discutimos cómo cargar un mapa básico. Aquí veremos cómo seleccionar un tipo de mapa requerido.

Tipos de mapas

Google Maps proporciona cuatro tipos de mapas. Ellos son -

  • ROADMAP- Este es el tipo predeterminado. Si no ha elegido ninguno de los tipos, se mostrará. Muestra la vista de la calle de la región seleccionada.

  • SATELLITE - Este es el tipo de mapa que muestra las imágenes de satélite de la región seleccionada.

  • HYBRID - Este tipo de mapa muestra las calles principales en imágenes de satélite.

  • TERRAIN - Este es el tipo de mapa que muestra el terreno y la vegetación.

Sintaxis

Para seleccionar uno de estos tipos de mapas, debe mencionar la identificación del tipo de mapa respectivo en las opciones de mapa como se muestra a continuación:

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

Mapa vial

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo ROADMAP -

<!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:9,
               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>

Producirá la siguiente salida:

Satélite

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo SATÉLITE -

<!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:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            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>

Producirá la siguiente salida:

Híbrido

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo HÍBRIDO -

<!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:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            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>

Producirá la siguiente salida:

Terreno

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo TERRENO -

<!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:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            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>

Producirá la siguiente salida:

Aumentar / disminuir el valor de zoom

Puede aumentar o disminuir el valor de zoom de un mapa modificando el valor de la zoom atributo en las opciones del mapa.

Sintaxis

Podemos aumentar o disminuir el valor de zoom del mapa usando la opción de zoom. A continuación se muestra la sintaxis para cambiar el valor de zoom del mapa actual.

var mapOptions = {
   zoom:required zoom value
};

Ejemplo: Zoom 6

El siguiente código mostrará la hoja de ruta de la ciudad Vishakhapatnam con un valor de zoom de 6.

<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

Ejemplo: Zoom 10

El siguiente código mostrará la hoja de ruta de la ciudad Vishakhapatnam con un valor de zoom de 10.

<!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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

De forma predeterminada, los nombres de las ciudades y de las opciones que aparecen en el mapa estarán en inglés. Si es necesario, también podemos mostrar dicha información en otros idiomas. Este proceso se conoce comolocalization. En este capítulo, aprenderemos cómo localizar un mapa.

Localización de un mapa

Puede personalizar (localizar) el idioma del mapa especificando la opción de idioma en la URL como se muestra a continuación.

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

Ejemplo

A continuación, se muestra un ejemplo que muestra cómo localizar GoogleMaps. Aquí puede ver una hoja de ruta de China que está traducida al idioma chino.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Salida

Producirá la siguiente salida:

Google Maps proporciona una interfaz de usuario con varios controles para permitir que el usuario interactúe con el mapa. Podemos agregar, personalizar y deshabilitar estos controles.

Controles predeterminados

Aquí hay una lista de los controles predeterminados proporcionados por Google Maps:

  • Zoom- Para aumentar y disminuir el nivel de zoom del mapa, tendremos un control deslizante con botones + y -, por defecto. Este control deslizante se ubicará en la esquina del lado izquierdo del mapa.

  • Pan - Justo encima del control deslizante de zoom, habrá un control de panorámica para desplazar el mapa.

  • Map Type- Puede ubicar este control en la esquina superior derecha del mapa. Proporciona opciones de tipo de mapa como Satélite, Mapa de ruta y Terreno. Los usuarios pueden elegir cualquiera de estos mapas.

  • Street view- Entre el icono de panorámica y el control deslizante de zoom, tenemos un icono de hombrecito naranja. Los usuarios pueden arrastrar este icono y colocarlo en una ubicación particular para obtener su vista de la calle.

Ejemplo

Aquí hay un ejemplo en el que puede observar los controles de IU predeterminados proporcionados por Google Maps:

Deshabilitar los controles predeterminados de la interfaz de usuario

Podemos deshabilitar los controles de IU predeterminados proporcionados por Google Maps simplemente haciendo el disableDefaultUI valor verdadero en las opciones del mapa.

Ejemplo

El siguiente ejemplo muestra cómo deshabilitar los controles de IU predeterminados proporcionados por Google Maps.

<!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:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Producirá la siguiente salida:

Habilitar / deshabilitar todos los controles

Además de estos controles predeterminados, Google Maps también proporciona tres controles más que se enumeran a continuación.

  • Scale- El control Escala muestra un elemento de escala del mapa. Este control no está habilitado de forma predeterminada.

  • Rotate- El control Rotar contiene un pequeño icono circular que le permite rotar mapas que contienen imágenes oblicuas. Este control aparece de forma predeterminada en la esquina superior izquierda del mapa. (Consulte Imágenes de 45 ° para obtener más información).

  • Overview- Para aumentar y disminuir el nivel de zoom del mapa, tenemos un control deslizante con botones + y -, por defecto. Este control deslizante se encuentra en la esquina izquierda del mapa.

En las opciones del mapa, podemos habilitar y deshabilitar cualquiera de los controles proporcionados por Google Maps como se muestra a continuación:

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

Ejemplo

El siguiente código muestra cómo habilitar todos los controles:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Producirá la siguiente salida:

Opciones de control

Podemos cambiar la apariencia de los controles de Google Maps usando sus opciones de control. Por ejemplo, el control del zoom se puede reducir o ampliar. La apariencia del control MapType se puede cambiar a una barra horizontal o un menú desplegable. A continuación se muestra una lista de opciones de control para los controles Zoom y MapType.

No Señor. Nombre de control Opciones de control
1 Control de zoom
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 Control MapType
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

Ejemplo

El siguiente ejemplo demuestra cómo utilizar las opciones de control:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Posicionamiento de control

Puede cambiar la posición de los controles agregando la siguiente línea en las opciones de control.

position:google.maps.ControlPosition.Desired_Position,

Aquí está la lista de posiciones disponibles donde se puede colocar un control en un mapa:

  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

Ejemplo

El siguiente ejemplo muestra cómo colocar el control MapTypeid en la parte superior central del mapa y cómo colocar el control de zoom en la parte inferior central del mapa.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Podemos dibujar objetos en el mapa y vincularlos a la latitud y longitud deseadas. Estos se llaman superposiciones. Google Maps proporciona varias superposiciones como se muestra a continuación.

  • Markers
  • Polylines
  • Polygons
  • Círculo y rectángulo
  • Ventana de información
  • Symbols

Para marcar una única ubicación en el mapa, Google Maps proporciona markers. Estos marcadores utilizan un símbolo estándar y estos símbolos se pueden personalizar. Este capítulo explica cómo agregar marcadores y cómo personalizarlos, animarlos y eliminarlos.

Agregar un marcador simple

Puede agregar un marcador simple al mapa en una ubicación deseada creando una instancia de la clase de marcador y especificando la posición que se marcará usando latlng, como se muestra a continuación.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Ejemplo

El siguiente código establece el marcador en la ciudad de Hyderabad (India).

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Animando el marcador

Después de agregar un marcador al mapa, puede ir más allá y agregarle animaciones como bounce y drop. El siguiente fragmento de código muestra cómo agregar animaciones de rebote y soltar a un marcador.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Ejemplo

El siguiente código establece el marcador en la ciudad de Hyderabad con un efecto de animación adicional:

<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Personalización del marcador

Puede utilizar sus propios iconos en lugar del icono predeterminado proporcionado por Google Maps. Simplemente configure el icono comoicon:'ICON PATH'. Y puede hacer que este icono se pueda arrastrar configurandodraggable:true.

Ejemplo

El siguiente ejemplo muestra cómo personalizar el marcador a un icono deseado:

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Quitar el marcador

Puede eliminar un marcador existente configurando el marcador como nulo utilizando el marker.setMap() método.

Ejemplo

El siguiente ejemplo muestra cómo eliminar el marcador de un mapa:

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

En el capítulo anterior, aprendimos cómo usar marcadores en Google Maps. Junto con los marcadores, también podemos agregar varias formas como círculos, polígonos, rectángulos, polilíneas, etc. Este capítulo explica cómo usar las formas proporcionadas por Google Maps.

Polilíneas

Las polilíneas, proporcionadas por Google Maps, son útiles para rastrear diferentes rutas. Puede agregar polilíneas a un mapa creando una instancia de la clasegoogle.maps.Polyline. Al crear una instancia de esta clase, tenemos que especificar los valores requeridos de las propiedades de una polilínea como StrokeColor, StokeOpacity y strokeWeight.

Podemos agregar una polilínea a un mapa pasando su objeto al método setMap(MapObject). Podemos eliminar la polilínea pasando un valor nulo al método SetMap ().

Ejemplo

El siguiente ejemplo muestra una polilínea que resalta la ruta entre las ciudades Delhi, Londres, Nueva York y Beijing.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

Polígonos

Los polígonos se utilizan para resaltar un área geográfica particular de un estado o país. Puede crear un polígono deseado creando una instancia de la clasegoogle.maps.Polygon. Al crear una instancia, tenemos que especificar los valores deseados para las propiedades de Polygon, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.

Ejemplo

El siguiente ejemplo muestra cómo dibujar un polígono para resaltar las ciudades Hyderabad, Nagpur y Aurangabad.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

Rectángulos

Podemos usar rectángulos para resaltar el área geográfica de una región en particular o un estado usando un cuadro rectangular. Podemos tener un rectángulo en un mapa instanciando la clasegoogle.maps.Rectangle. Al crear una instancia, tenemos que especificar los valores deseados para las propiedades del rectángulo, como ruta, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, límites, etc.

Ejemplo

El siguiente ejemplo muestra cómo resaltar un área en particular en un mapa usando un rectángulo:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Esto le da el siguiente resultado:

Círculos

Al igual que los rectángulos, podemos usar Círculos para resaltar el área geográfica de una región en particular o un estado usando un círculo al instanciar la clase google.maps.Circle. Al crear una instancia, tenemos que especificar los valores deseados para las propiedades del círculo, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc.

Ejemplo

El siguiente ejemplo muestra cómo resaltar el área alrededor de Nueva Delhi usando un círculo:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

Además de marcadores, polígonos, polilíneas y otras formas geométricas, también podemos dibujar una ventana de información en el mapa. Este capítulo explica cómo utilizar la ventana de información.

Agregar una ventana

La ventana de información se utiliza para agregar cualquier tipo de información al mapa. Por ejemplo, si desea proporcionar información sobre una ubicación en el mapa, puede utilizar una ventana de información. Por lo general, la ventana de información se adjunta a un marcador. Puede adjuntar una ventana de información creando una instancia delgoogle.maps.InfoWindowclase. Tiene las siguientes propiedades:

  • Content - Puede pasar su contenido en formato String usando esta opción.

  • position - Puede elegir la posición de la ventana de información usando esta opción.

  • maxWidth- De forma predeterminada, el ancho de la ventana de información se ampliará hasta que el texto esté ajustado. Al especificar maxWidth, podemos restringir el tamaño de la ventana de información horizontalmente.

Ejemplo

El siguiente ejemplo muestra cómo configurar el marcador y especificar una ventana de información encima de él:

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

Además de marcadores, polígonos, polilíneas y otras formas geométricas, también podemos agregar imágenes vectoriales predefinidas (símbolos) en un mapa. Este capítulo explica cómo utilizar los símbolos proporcionados por Google Maps.

Agregar un símbolo

Google proporciona varias imágenes basadas en vectores (símbolos) que se pueden usar en un marcador o una polilínea. Al igual que otras superposiciones, para dibujar estos símbolos predefinidos en un mapa, tenemos que instanciar sus respectivas clases. A continuación se muestra una lista de símbolos predefinidos proporcionados por Google y sus nombres de clase:

  • Circle - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Estos símbolos tienen las siguientes propiedades: path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity y strokeWeight.

Ejemplo

El siguiente ejemplo demuestra cómo dibujar símbolos predefinidos en Google Map.

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Animando el símbolo

Al igual que los marcadores, también puede agregar animaciones como rebotar y soltar a los símbolos.

Ejemplo

El siguiente ejemplo muestra cómo usar un símbolo como marcador en un mapa y agregarle animación:

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

El programa JavaScript de Google Maps puede responder a varios eventos generados por el usuario. Este capítulo proporciona ejemplos que demuestran cómo realizar el manejo de eventos mientras se trabaja con Google Maps.

Agregar un oyente de eventos

Puede agregar un detector de eventos usando el método addListener(). Acepta parámetros como el nombre del objeto al que queremos agregar el oyente, el nombre del evento y el evento del controlador.

Ejemplo

El siguiente ejemplo muestra cómo agregar un detector de eventos a un objeto marcador. El programa aumenta el valor de zoom del mapa en 5 cada vez que hacemos doble clic en el marcador.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Abrir una ventana de información al hacer clic

El siguiente código abre una ventana de información al hacer clic en el marcador:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Eliminar al oyente

Puede eliminar un oyente existente utilizando el método removeListener(). Este método acepta el objeto de escucha, por lo tanto, tenemos que asignarle una variable y pasarla a este método.

Ejemplo

El siguiente código muestra cómo eliminar un oyente:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida: