Mira Cómo Hacerlo

Cómo usar y configurar Google Maps API de Javascript paso a paso

Escrito por: Adrian Almiñana Navarro
30 enero 2021

JavaScript es un lenguaje de programación del lado del cliente (navegador) utilizado con HTML y CSS para controlar cómo las páginas web interactúan con los usuarios. ¿Cómo usar la Google-Maps API de Javascript?

En este momento queremos presentarte una aplicación que está completamente bien estructurada como lo es Google Maps con la cual si te darás cuenta lleva dentro de si grandes trucos y herramientas que los usuarios comunes no conocen, pero que tu puedes leyendo nuestro blog.

De hecho una de las principales cosas que puedes hacer con Google Maps es el poder crear mapas personalizados para que no tengas que estar improvisando al momento de dirigirte a un lugar.

Cómo Usar Google Maps API de Javascript

JavaScript se usa ampliamente para mostrar mapas en páginas web para brindar a los usuarios la capacidad de navegar y consultar esos mapas. El cual puedes activarlo en los diferentes navegadores siguiendo las instrucciones que las paginas de soporte te ofrecen.

Antes de iniciar debemos recordarte que cada cierto tiempo debes verificar la ubicación de tu negocio en la Google Maps y corregirla si es necesario ya que en ciertos periodos de tiempo, esto puede pasar.

Índice()
  1. ¿Cómo usar la Google-Maps API de Javascript?
    1. Los Eventos y los InfoWindows
    2. Carga Asíncrona
    3. La API de Google Maps en WordPress

¿Cómo usar la Google-Maps API de Javascript?

El siguiente es un ejemplo mínimo de un mapa incrustado con la Google Maps API de JavaScript:

<html>
<head>
<title> Un Simple Google Map </title>
</head>

<body>
<h1> A Simple Google Mapa </h1>

<div id = "map" style = "width: 600px; height: 400px;"> </div>

<script src = "https://maps.googleapis.com/maps/api/js" > </script>

<script>
var map_parameters = {center: {lat: 47.490, lng: -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);
</script>
</body>
</html>

aplicacion android google map

Tenga en cuenta que si inserta este mapa en su propio sitio web, necesitará una clave de API estándar gratuita, que puede obtener del sitio web de Google Maps API.

Necesitarás credenciales de inicio de sesión de Google (gmail). A continuación, inserte la llave API como una cadena de consulta en el final de la URL de script:

<script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> </ script>

El elemento <div> define una división o sección de la página que se llenará con un mapa de Google. Al DIV se le asigna un atributo de identificación con el valor del mapa para que pueda identificarse en el JavaScript.

El DIV también tiene algo de CSS en el atributo de estilo que le dice que debe tener 600 píxeles de ancho y 400 píxeles de alto.

El primer elemento <script> tiene un atributo src que le indica que ingrese la biblioteca de JavaScript de Google Maps API.

Los Eventos y los InfoWindows

Los mapas a menudo necesitan responder a las acciones de los usuarios, como hacer clic con el mouse, deslizar o arrastrar. Esas acciones son referidas en JavaScript como eventos.

Un comportamiento común con las marcas de posición es abrir una ventana de información cuando una marca de posición recibe un evento de clic.

<html>
<head>
<title> Un mapa con eventos </title>
</head>

<body>
<h1> Un mapa con eventos </h1>

<div id = "map" style = "width: 600px; height : 400px; "> </div>

<script src =" https://maps.googleapis.com/maps/api/js "> </script>

<script>
var map_parameters = {center: {lat: 47.490, lng : -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);

var flag = 'https://maps.google.com/mapfiles/ms/icons/purple-dot.png';

var position1 = {position: {lat: 47.490, lng: -117.585},
mapa: mapa, icono: bandera, título: "EWU Cheney Campus"};

var position2 = {position: {lat: 47.661, lng: -117.404},
mapa: mapa, icono: bandera, título: "EWU RiverPoint Campus"};

var marker1 = new google.maps.Marker (position1);
var marker2 = new google.maps.Marker (position2);

función marker_clicked ()
{
info.setContent (this.getTitle ());
info.open (mapa, este);
}

var info = new google.maps.InfoWindow ();
marker1.addListener ('clic', marker_clicked);
marker2.addListener ('clic', marker_clicked);
</script>
</body>
</html>

mapa google map api

Carga Asíncrona

La mayoría de los ejemplos que ve en los ejemplos de código de la API de Javascript de Google Maps colocan el código de asignación en una función.

Luego llaman a esa función de forma asíncrona después de que la biblioteca de API se haya cargado. Esto permite que la otra página de contenido se muestre mientras se carga la biblioteca.

<html>
<head>
<title> Spokane Median Household Income </title>
</head>

<body>
<h1> Spokane Median Household Income </h1>

<div id = "map" style = "width: 600px; altura : 400px; "> </div>

<script>
function init_map ()
{
var map_parameters = {center: {lat: 47.490, lng: -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);

var kml_parameters = {url: 'https://michaelminn.net/tutorials/google-maps-api/google-maps-api.kmz', map: map};
var kml_layer = new google.maps.KmlLayer (kml_parameters);
}
</script>
<script src = "https://maps.googleapis.com/maps/api/js?callback=init_map" async defer> </script>
</body>
</html>

La API de Google Maps en WordPress

La API de Google Maps se puede utilizar en páginas de WordPress, aunque algunos ajustes son útiles para facilitar el trabajo con la API.

WordPress viene instalado con filtros destinados a mejorar el aspecto y la seguridad de un sitio de WordPress, pero que hacen más difícil el uso de JavaScript en general y la API de Google Maps en particular.

Un filtro es wpautop, que busca líneas en blanco en HTML y agrega etiquetas de párrafo para convertir las líneas en blanco en separadores de párrafo. Esto dañará JavaScript si hay líneas en blanco en su código para mejorar la legibilidad.

remove_filter ('the_content', 'wpautop');
function my_myme_types ($ mime_types)
{
$ mime_types ['kml'] = 'application / vnd.google-earth.kml + xml';
$ mime_types ['kmz'] = 'application / vnd.google-earth.kmz';
devuelve $ mime_types;
}
add_filter ('upload_mimes', 'my_myme_types', 1, 1);
Después de realizar estos cambios, puede copiar el contenido del HTML dentro del <cuerpo "en una página de WordPress usando el editor de texto (no el editor visual). Para un mapa simple, esto sería:
<div id =" map "style = "ancho: 600px; height: 400px; "> </div>

<script src =" https://maps.googleapis.com/maps/api/js "> </script>

<script>
var map_parameters = {center: {lat: 47.490, lng: -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);
</script>

Subir