My Maps location: Locais e Categorias

1. Obtenha uma chave da API do Google Maps

Sempre que usar as APIs do Google Maps, se o seu domínio tiver sido criado após 22 de junho de 2016, você precisará incluir uma chave para validar sua solicitação.
Obtenha uma chave e habilite a API: https://developers.google.com/maps/documentation/javascript/get-api-key

Mais informações: https://developers.google.com/maps/documentation/javascript/usage?hl=en

O primeiro passo é criar um projeto e depois digitar o nome do projeto.

Se eu quiser permitir todas as solicitações do meu domínio, o padrão a seguir é *.joomunited.com/*.
Se você quiser permitir apenas um domínio específico, por exemplo, meudominio.com, o padrão seria joomunited.com/*.

Em um ambiente localhost, você pode inserir qualquer chave válida e ela funcionará sem precisar referenciar nenhum domínio.

A chave da API é gerada em seguida; essa é a chave que você precisa copiar para adicionar à My Maps location.

Adicione a chave à My Maps Location.

Na Componentes > My Maps Location > Opções , você pode adicionar uma chave na configuração.

Cole a chave.

Resumo passo a passo:

Então, os passos que eu sigo são:

Acesse o Console de APIs do Google
Crie ou selecione um projeto
Clique em Continuar para ativar a API e quaisquer serviços relacionados.
Na página de Credenciais, obtenha uma chave do navegador (e defina as Credenciais da API).
Para evitar o roubo de cotas, proteja sua chave de API seguindo estas práticas recomendadas.

2. Gerenciar categorias de localização

Os locais são classificados em categorias. Essas categorias podem ser exibidas como filtro na interface ou usadas como parâmetro predefinido em um item de menu para carregar locais categorizados.

Se você tiver muitos locais, é recomendável usar categorias. Você pode criar categorias e subcategorias.
Para criar uma categoria, acesse My Maps location > Categoria e clique em Nova.

Em seguida, na tela de categorias, você precisará adicionar um título e uma categoria principal, caso queira criar uma subcategoria

Você também pode definir um marcador padrão para localização na categoria usando a guia Seleção de marcador.

Observação: uma categoria chamada "Minha categoria" , permitindo que você comece a adicionar locais diretamente após a instalação.

3. Crie um local

Para criar um local, acesse My Maps location > Locais > Novo

Existem 3 campos obrigatórios:

Nome do local
Categoria do local
Detalhes da localização (endereço)

Para o endereço, você tem 3 soluções para adicioná-lo:

Utilize o campo de pesquisa (recomendado)
Navegue até o mapa e use o cursor para apontar um local
Insira um endereço (deve ser válido no Google Maps)

Para adicionar um local ao mecanismo de busca, digite o nome do local que deseja adicionar.

Ao selecionar, os campos de latitude e longitude serão preenchidos automaticamente. Meu mapa também está integrado ao Google Places! Isso significa que você pode pesquisar uma loja ou qualquer outro local cadastrado no Google Maps, e nosso componente obterá todas as informações do local.

Você também pode se mover pelo mapa e colocar um marcador diretamente; o resultado será o mesmo e você obterá automaticamente a latitude e a longitude.

Tenha cuidado ao preencher manualmente o campo de endereço e o CEP; ele deve corresponder a um endereço conhecido no Google Maps.

Todas as outras informações do local (descrição, horário de funcionamento, etc.) são exibidas na visualização detalhada do local.

O link de contato na seção de detalhes do local permite adicionar um link de contato, um link de e-mail (mailto) ou uma URL para cada local. No front-end, haverá um botão de contato que abrirá a URL ou executará a ação do e-mail (mailto).

4. Outras informações de localização

Em cada local, você pode adicionar uma imagem e um marcador.

Imagem da localização: A imagem será exibida como uma miniatura na dica de ferramenta da localização e em tamanho maior na página de detalhes da localização.
Usar ícone de categoria: Use o ícone que você inseriu no campo de categoria dos meus locais no mapa.
Fundo do marcador: escolha a cor para o fundo do seu marcador.
O marcador será exibido no mapa como um ícone de marcador de localização. Você também encontrará alguns conjuntos de marcadores interessantes para suas localizações incluídos na My Maps Location .
Usar um link personalizado substituirá o link para os detalhes do local por um URL personalizado.

My Maps location utiliza o recurso multilíngue nativo do Joomla. Você pode definir um idioma nas categorias de localização e nas próprias localizações. Ao trocar de idioma, as localizações serão filtradas como qualquer outro conteúdo do Joomla para exibir o conteúdo no idioma aprovado.

O campo de descrição da localização é um dos mais importantes.
Ele será exibido na página de detalhes da localização e, dependendo do tema, como um texto introdutório da localização nos resultados de pesquisa. Mais importante ainda, a descrição é um editor WYSIWYG com todos os plugins já carregados, o que significa que você pode adicionar o que quiser (imagens, vídeos...).

Aqui está o texto introdutório exibido nos resultados da pesquisa de localização.

O campo de tags utiliza o mesmo sistema de tags do Joomla. Você pode adicionar tags e subtags e, em seguida, carregá-las no frontend como filtros. Para gerenciar todas as tags, basta carregar o componente de tags do Joomla: Componente de Menu > Tags.
No frontend, dependendo da configuração, as tags podem ser exibidas como caixas de seleção (como abaixo) ou como uma lista suspensa.

My Maps Location agora possui campos adicionais para inserir metadados (para mecanismos de busca). Esses campos são exibidos na página de detalhes da localização.

5. Exibir locais na interface do usuário

Para exibir suas localizações no frontend, você pode usar:

Um menu para exibir o mecanismo de busca de localização, uma localização individual ou uma categoria de localizações
Um módulo para exibir um campo de pesquisa ou selecionar um conjunto de locais
Um botão de editor para exibir uma ou várias localizações em qualquer editor

No gerenciador de menus do Joomla, adicione um elemento e selecione o tipo "Busca e exibição de localização". Isso exibirá o mecanismo de busca de localização com filtros.
Selecione "Visualização detalhada da localização" para exibir uma localização predefinida específica.

Se você selecionar “Pesquisa e exibição de localização”, terá alguns parâmetros de exibição. Alguns deles podem substituir os parâmetros padrão do componente.

Na aba principal do menu, você pode configurar:

Insira o endereço: você pode forçar a exibição de um endereço padrão ao carregar a página. Este campo pode ser deixado em branco.
Distância: a distância para a busca da fechadura, considerando o endereço acima. Pode ser deixada como -1 (padrão).
Categoria: carregar uma categoria específica de localização
Limite de pesquisa: limite o número de resultados da pesquisa. O valor 10 retornará apenas os 10 primeiros resultados da pesquisa por localização.
Ordenação: ordene os resultados da pesquisa por Data, Título, Distância (padrão)

Em seguida, na guia de menu My Maps Location , você pode configurar:

Selecione o componente: My Maps Location ou todas as integrações de terceiros, como K2, Jomsocial ...
ID da categoria padrão (extensões de terceiros): Categoria padrão a ser carregada quando uma extensão de terceiros estiver em uso, como K2, Hikashop ou Adsmanager. ID da lista do Community Builder.
Localizações de categorias filhas: Exibir também como resultados de pesquisa localizações de subcategorias, não apenas daquela selecionada acima.
Tema: selecione um dos 3 temas disponíveis para o item de menu: padrão, largura total ou barra lateral. O tema de exibição de resultados e pesquisa está disponível para o item de menu.
Fornecedor de mapas: Selecione Google Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu ou Mapquest para personalizar seus mapas.
Ativar tags de pesquisa : Permite que as pesquisas sejam feitas usando nomes de tags de localização.
Modelos: Dependendo da fonte do mapa, você terá diversos tipos e cores de mapas.
Camada de mapa: Adicione dados (camadas) aos seus mapas. Existem camadas KML, de tráfego, de transporte público e de ciclismo.
URL da camada do Google Maps: Use a camada de dados para armazenar seus dados personalizados ou para exibir dados GeoJSON em um mapa do Google.
Tipo de mapa do Bing: Se o Bing Maps for seu provedor de mapas, selecione a aparência e os dados do Bing Maps.
Tipo OpenStreetMap: Se o OpenStreetMap for seu provedor de mapas, você poderá adicionar dados (camadas) aos seus mapas.
Dica de localização: Ao carregar o mapa, a dica de localização é aberta automaticamente após a pesquisa de localização.
Zoom do mapa: Defina um nível de zoom padrão no mapa.
Opções de largura e altura do mapa e dos resultados da pesquisa

Exibição na interface baseada no tema

Resultado da pesquisa por localização única:

Exibir locais usando um módulo

My maps location vêm com 2 módulos para localizações nativas + outro para integração com terceiros (como um módulo para exibir a localização de itens do K2)

O módulo Mapa permite exibir suas localizações com os mesmos filtros do menu, porém em uma posição de módulo. As localizações serão exibidas como Mapa ou Lista. Você pode selecionar um conjunto de localizações ou categorias de localizações.

O módulo de pesquisa do mapa " My Maps Location " exibirá um mecanismo de busca com algumas opções de filtro, como a largura do mapa ou o componente no qual a localização será pesquisada (por exemplo, pesquisar apenas por locais do K2).

Exibir módulo no frontend:

Exibir locais usando um botão de editor

O botão do editor será carregado no seu editor Joomla (normalmente em artigos ou módulos HTML personalizados). Você verá o botão na parte inferior do editor.
Ao clicar, você verá uma janela pop-up que permite selecionar um ou mais locais que você adicionou anteriormente.

Em seguida, você pode selecionar um ou mais locais e clicar no botão para adicioná-los ao seu artigo. Se você não especificar nenhum nível de zoom, a imagem será carregada automaticamente para se ajustar à sua área de localização.
O código da tag que você verá no seu editor WYSIWYG será semelhante a este modelo: {mymaplocations mapid width height}

Exemplo: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} Este código exibirá um mapa com a localização de ID=1, com 58% de largura, 400px de altura, zoom de 10x e tipo Google. Use vírgulas para adicionar mais de uma localização em um mapa. Exemplo: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} onde os IDs das localizações são 1, 2 e 3.