Como usar a API Javascript do Google Maps?

JavaScript é uma linguagem de programação do lado do cliente (navegador) usada com HTML e CSS para controlar como as páginas da web interagem com os usuários. ¿ Usando o Google-Maps API Javascript ?

O JavaScript é amplamente usado para exibir mapas em páginas da Web, para permitir aos usuários navegar e consultar esses mapas.

Como usar a API Javascript do Google-Maps?

A seguir, é apresentado um exemplo mínimo de um mapa incorporado à API JavaScript do Google Maps:

<html>
<head>
<title> Um mapa simples do Google </title>
</head>

<body>
<h1> Um mapa simples do Google </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 = novo google.maps.Map (document.getElementById ('map'), map_parameters);
</script>
</body>
</html>

Observe que, se você inserir este mapa em seu próprio site, precisará de uma chave de API padrão gratuita, que pode ser obtida no site da API do Google Maps.

Você precisará de credenciais de login do Google (gmail). Em seguida, insira a chave da API como uma sequência de consultas no final do URL do script:

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

O elemento <div> define uma divisão ou seção da página que será preenchida com um mapa do Google. O DIV recebe um atributo de identificação com o valor do mapa para que possa ser identificado no JavaScript.

O DIV também possui algum CSS no atributo style, que indica 600 pixels de largura e 400 pixels de altura.

O primeiro elemento <script> possui um atributo src que solicita a inserção da biblioteca JavaScript da API do Google Maps.

Eventos e InfoWindows

Os mapas geralmente precisam responder às ações do usuário, como clicar, arrastar ou arrastar. Essas ações são referidas no JavaScript como eventos.

Relacionado:  Google Waze x Google Maps: diferenças e semelhanças

Um comportamento comum com marcadores é abrir uma janela de informações quando um marcador recebe um evento de clique.

<html>
<head>
<title> Um mapa com eventos </title>
</head>

<body>
<h1> Um mapa com 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 = novo google.maps.Map (document.getElementById ('map'), map_parameters);

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

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

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

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

função marker_clicked ()
{
info.setContent (this.getTitle ());
info.open (mapa, leste);
}

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

Carga assíncrona

A maioria dos exemplos que você vê nos exemplos de código da API Javascript do Google Maps coloca o código de atribuição em uma função.

Em seguida, eles chamam essa função de forma assíncrona após o carregamento da biblioteca da API. Isso permite que a outra página de conteúdo seja exibida enquanto a biblioteca está carregando.

<html>
<head>
<title> Renda média familiar de Spokane </title>
</head>

<body>
<h1> Renda familiar média de Spokane </h1>

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

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

var kml_parameters = {url: 'http://michaelminn.net/tutorials/google-maps-api/google-maps-api.kmz', mapa: mapa};
var kml_layer = novo google.maps.KmlLayer (kml_parameters);
}
</script>
<script src = "https://maps.googleapis.com/maps/api/js?callback=init_map" adiamento assíncrono> </script>
</body>
</html>

A API do Google Maps no WordPress

A API do Google Maps pode ser usada nas páginas do WordPress, embora algumas configurações sejam úteis para facilitar o trabalho com a API.

O WordPress é instalado com filtros projetados para melhorar a aparência e a segurança de um site WordPress, mas isso dificulta o uso do JavaScript em geral e da API do Google Maps em particular.

Relacionado:  Como silenciar o Google Maps Voice ao receber uma chamada

Um filtro é wpautop, que pesquisa linhas em branco em HTML e adiciona tags de parágrafo para converter linhas em branco em separadores de parágrafo . Isso danificará o JavaScript se houver linhas em branco no seu código para melhorar a legibilidade.

remove_filter ('the_content', 'wpautop');
função my_myme_types ($ mime_types)
{
$ mime_types ['kml'] = 'application / vnd.google-earth.kml + xml';
$ mime_types ['kmz'] = 'application / vnd.google-earth.kmz';
retorna $ mime_types;
}
add_filter ('upload_mimes', 'my_myme_types', 1, 1);
Depois de fazer essas alterações, você pode copiar o conteúdo HTML para o <body "em uma página do WordPress usando o editor de texto (não o editor visual). Para um mapa simples, seria:
<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 = novo google.maps.Map (document.getElementById ('map'), map_parameters);
</script>
 

Você pode estar interessado:

Deixe um comentário

Este website utiliza cookies para lhe proporcionar a melhor experiência de utilizador. Se continuar a navegar está a dar o seu consentimento para a aceitação dos referidos cookies e aceitação da nossa privacy policy, clique no link para mais informações. ACEPTAR

Aviso de cookies