detallesengooglemaps: Google Map

¿Qué son los mapas de Google?

Google Maps es un servicio gratuito de cartografía web por Google que ofrece varios tipos de información geográfica. El uso de Google Maps, se puede.

Búsqueda de lugares u obtener direcciones desde un lugar a otro.
Ver y navegar a través de imágenes a nivel de calle panorámica horizontal y vertical de diferentes ciudades de todo el mundo.
Obtener información específica como el tráfico en un punto determinado.

Google Maps ofrece una API con el que puedes personalizar los mapas y la información que aparece en ellos. En este capítulo se explica cómo cargar un sencillo mapa de Google 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: Crear una página HTML

Crear una página básica HTML con etiquetas de la cabeza y el cuerpo, como se muestra a continuación -

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

Paso 2: Carga de la API

Cargar o incluir la API de Google Maps usando la etiqueta de secuencia de comandos como se muestra a continuación -

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

Paso 3: Crear el contenedor

Para sostener el mapa, tenemos que crear un elemento contenedor, en general, la etiqueta <div> (un contenedor genérico) se utiliza para este propósito. Crear un elemento contenedor y definir 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 MapOptions objeto (que es creado como un literal) y establecer los valores para las variables de mapa de inicialización. Un mapa tiene tres opciones principales, a saber, el centro, elzoom, y mapTypeId.

centro - Bajo esta propiedad, tenemos que especificar la ubicación donde queremos centrar el mapa. Para superar la ubicación, tenemos que crear un LatLng objeto pasando la latitud y las longitudes de la ubicación requerida para el constructor.
zoom - En 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 -
- HOJA DE RUTA (normal, por defecto mapa 2D)
- SATÉLITE (mapa fotográfico)
- HYBRID (combinación de dos o más tipos)
- TERRENO (mapa con montañas, ríos, etc.)

Dentro de una función, por ejemplo, loadMap (), cree el objeto MapOptions y configurar los valores necesarios para el centro, 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 por crear instancias de la clase de JavaScript llamadoMapa. Mientras instanciar esta clase, usted tiene que pasar un contenedor HTML para sostener el mapa y las opciones de los mapas para el mapa es necesario. Crear un objeto de mapa, como se muestra a continuación.

var map = new google.maps.Map (document.getElementById ("muestra"), MapOptions);

Paso 6: cargar el mapa

Finalmente cargar el mapa llamando al método loadMap () o añadiendo DOM oyente.

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 llamado Visakhapatnam con un valor de zoom de 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://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>

Se produce la siguiente salida -

detallesengooglemaps

sábado, 14 de noviembre de 2015

Google Map - Como empezar