Google Maps JavaScript API es una herramienta de JavaScript fácil de usar y bastante poderosa que nos permite crear y mostrar mapas en un sitio web. Este artículo lo guiará en la configuración de Google Maps JS API, y luego en la construcción de un mapa simple que tenga un marcador y una forma de polilínea, y algunas otras características.

Configurando el Mapa

  1. 1 Abra o cree su página web. Si aún no tiene una página web en la que desea insertar el mapa, puede usar la siguiente plantilla HTML5; guárdelo como 'map_page.html': 
      <html lang="en"> <cabeza> <meta juego de caracteres="utf-8"> <título>Mi folleto Mapa</título> </cabeza> <cuerpo>  </cuerpo> </html>
  2. 2 Incluye el archivo JS de Google Maps. Para hacer esto, pegue la siguiente línea de código en su archivo HTML, dentro del área, en una nueva línea, justo antes del cierre etiqueta: 
     <guión asincrónico aplazar  src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initMap"> </guión>
  3. 3 Obtenga una clave API e insértela en la URL JS. Para utilizar Google Maps JS API, al igual que cualquier otra API de Google, necesitará una clave API, que es como una contraseña. Luego debe insertar su nueva clave en la URL del paso anterior donde dice [YOUR_API_KEY] (eliminar los corchetes). Para obtener su propia clave, consulte la página Obtener una clave / autenticación.
  4. 4 Agregue un contenedor de mapa HTML. Google Maps mostrará el mapa dentro de un elemento HTML, por lo que debe proporcionar uno para ello. Pegue la siguiente línea de marcado dentro del : 
     <div carné de identidad="mapa"></div>
  5. 5 Estilo el contenedor del mapa. Debes establecer qué tan grande será el mapa cuando se muestre, y debes usar CSS para hacer esto. Puede agregar lo siguiente al documento : 
     <>> #mapa  altura: 500px; anchura: 700px;  >
  6. 6 Crea el objeto del mapa. Para comenzar a escribir el código JavaScript que configura el mapa, deberá agregar un área al después el contenedor del mapa div. También dentro de esto, puede crear el objeto del mapa llamando al Mapa() función del objeto google.maps También deberá pasarle a la función el elemento contenedor contenedor html, como este: 
     <tipo de script='texto / javascript'> var mapa; función initMap()  // Crea el objeto de mapa. mapa = nuevo google.mapas.Mapa(documento.getElementById('mapa'));  guión>
  7. 7 Establece el zoom y el centro del mapa. Las propiedades de zoom y centro del mapa determinan el área que cubre el mapa de forma predeterminada cuando se carga el mapa. Estos son solo los mapas defecto valores; los mapas corriente el zoom y el centro se pueden cambiar más adelante si habilita esos controles; lo abordaremos más adelante.
    Nota: Simplemente debe copiar las siguientes líneas de código en su elemento (del paso anterior), y asegúrese de que sea dentro la función initMap (), antes del cierre '': 
     mapa.setZoom(2); mapa.setCenter(Lat: 0, lng: 0);
  8. 8 Agrega un marcador. Los marcadores muestran la ubicación de un punto en un mapa. En Leaflet, los marcadores son un tipo de 'superposición', por lo que se pueden agregar directamente a los mapas. Por defecto, un marcador aparece como un pin rojo, que es una imagen estándar que puede cambiar. 
     var marcador = nuevo google.mapas.Marcador(); var coordenadas = Lat: 20, lng: 20; marcador.posición de ajuste(coordenadas); marcador.setMap(mapa); marcador.setTitle('Chad');
  9. 9 Agregar polilínea. Al igual que el marcador, una polilínea es un tipo de superposición, pero se usa para un propósito diferente. Una polilínea es simplemente una línea con múltiples segmentos. Lo define proporcionando las coordenadas de los puntos en los que estarán los segmentos de línea. Las coordenadas deben ser una matriz de objetos de punto de coordenadas. Una de las grandes características de las polilíneas de Google Maps es que pueden ser "geodésicas", lo que significa que pueden curvarse para adaptarse a la forma de la Tierra. Puede configurar eso como una opción más adelante. 
     var coordenadas = [ Lat: 20, lng: 10, Lat: 10, lng: 20, Lat: 20, lng: 30 ]; var polilínea = nuevo google.mapas.Polilínea(); polilínea.setPath(coordenadas); // Usando la matriz que definimos anteriormente polilínea.setMap(mapa);
  10. 10 Establecer opciones. Cada superposición en Google Maps tiene opciones que puede establecer, que determinan cómo se ve la superposición. Puede establecer las opciones del marcador (a partir de los pasos anteriores) para que se vea único, pero a continuación hay opciones para establecer para la polilínea que acaba de crear: 
     polilínea.setOptions( color del trazo: '# FF0000', // Rojo brillante strokeOpacity: 1.0, // Totalmente opaco (no translúcido) strokeWeight: 2 // Espesor de 2 píxeles );
  11. 11 El mapa terminado