Como exibir itens da lista do SharePoint em um mapa do Google
Nesta postagem iremos demonstrar como exibir itens de uma lista do SharePoint diretamente em um mapa usando JSLink e a API JavaScript do Google Maps.
Primeiramente iremos criar uma lista chamada “Empresas”. Em seguida iremos incluir na coluna “Título” o nome da empresa, então em uma nova coluna que chamaremos “Localização”, será incluída as informações do endereço da empresa.
Então usaremos uma Web Part do editor de conteúdo, colocada acima da exibição da lista, como contêiner para o mapa. Assim o JavaScript será usado para chamar a API do Google para gerar o mapa, obter a geolocalização da localização de cada item da lista e adicionar os marcadores ao mapa. Por fim o JSLink será usado para associar o JavaScript com a exibição da lista que é executada do lado do cliente durante o processo de renderização da exibição de lista (renderização do lado do cliente).
Pré-requisitos
Primordialmente é necessário uma chave da API do Google Maps.
Versões
SharePoint 2013, Office 365 * * JSLink não é compatível com a experiência de site moderno do Office 365. A Microsoft recomenda SPFx ao desenvolver soluções personalizadas para sites modernos.
Guia passo a passo para exibir itens da lista do SharePoint em um mapa do Google
Etapa 1: Crie uma nova lista “empresas”
Primeiramente vá para a seção Conteúdo do site , clique em Novo e escolha Lista.
Etapa 2: Nomeie a lista de “Empresas”
Em seguida nomeie a lista como “Empresas” e clique no botão Criar .
Etapa 3: adicionar uma nova coluna
Então adicione uma nova coluna do tipo linha única de texto .
Etapa 4: crie a coluna “Localização”
Logo após nomeie a coluna como “Local” e clique no botão Criar .
Etapa 5: preencher a lista de “empresas”
Então preencha a lista “Empresas” com exemplos de nomes e localizações de empresas.
Etapa 6: Criar o arquivo JSLinkMapView.js
Em seguida, usando seu editor favorito, crie e salve um arquivo chamado JSLinkMapView.js e adicione o código a seguir.
Nota: certifique-se de inserir sua própria chave de API do Google!
document.write (‘<script type = ”text / javascript” src = ”https://maps.googleapis.com/maps/api/js?key= << sua chave de API do Google aqui >> “> </script> ‘);
função RegisterCustomOverrides () {
var obj = {};
obj.Templates = {};
obj.Templates.OnPostRender = LoadMap;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides (obj);
}
função LoadMap (ctx) {
var mapOptions = {
center: new google.maps.LatLng (42, -88),
zoom: 6
}; var map = new google.maps.Map (document.getElementById (“map-canvas”), mapOptions); var geo = new google.maps.Geocoder (); var bounds = new google.maps.LatLngBounds (); var rows = ctx.ListData.Row; var idx = 0;
for (var i = 0; i <rows.length; i ++) {
geo.geocode ({‘address’: rows [i] [“Location”]}, function (results, status) {
new google.maps.Marker ( {map: map, position: results [0] .geometry.location, title: rows [idx ++]. Title});
bounds.extend (results [0] .geometry.location);
map.fitBounds (bounds);
}) ; } }
RegisterModuleInit (“/ SiteAssets / JSLinkMapView.js”, RegisterCustomOverrides);
RegisterCustomOverrides ();
Etapa 7: fazer upload do arquivo JSLinkMapView.js
Então carregue o arquivo JSLinkMapView.js para a biblioteca de documentos de Ativos do Site do seu site.
Etapa 8: Mude a visualização para o SharePoint clássico
Então retorne à lista “Empresas” e clique em Retornar ao SharePoint clássico.
Nota: No momento em que este artigo foi escrito, as novas “páginas modernas” da Microsoft não suportavam muitos dos recursos de personalização do SharePoint, incluindo JSLink.
Etapa 9: edite a página do SharePoint
Em seguida no menu Ações do site, escolha Editar página .
Etapa 10: Adicionar uma Web Part do Editor de Conteúdo
- Primeiramente clique em Adicionar Web Part
- Em seguida escolha mídia e conteúdo
- Então escolha o Editor de Conteúdo
- Por fim clique em Adicionar
Etapa 11: edite o código da Web Part do Editor de conteúdo
Com a Web Part do Editor de Conteúdo agora adicionada acima dos itens da lista, clique para editar a Web Part e ativar as opções da faixa de opções e, em seguida, escolha Editar Fonte.
Etapa 12: Criar um contêiner para o Google Map
Então cole o seguinte na janela Fonte da Web Part do Editor de Conteúdo e clique no botão OK . Assim você acabou de criar o contêiner para o mapa do Google.
<div id = ‘map-canvas’ style = ‘border: 1px preto sólido; altura: 200px; ‘/>
Etapa 13: Editar o contêiner do Google Map
Assim clique em Editar Web Part no menu de contexto da Web Part de exibição de lista.
Etapa 14: atualize o campo JSLink diverso
Em seguida expanda Diversos, cole o seguinte no campo JSLink e clique em OK:
~ site / SiteAssets / JSLinkMapView.js
Etapa 15: Concluir a edição
Por fim clique no botão Stop Editing na faixa de opções.
Enfim após vermos neste post como exibir itens de uma lista do SharePoint em um mapa, caso ainda possua dúvidas entre em contato com nossa empresa. Temos uma equipe de consultores que pode melhorar ainda mais a sua experiência com essa fantástica ferramenta.
Luiz Antonio Sgargeta é sócio fundador e CEO da Trinapse, consultoria brasileira de Microsoft 365 com quase duas décadas de operação, acumula mais de 20 anos em desenvolvimento de software e em ambientes corporativos de alta complexidade.
Ver maisVer menos
Trabalha com SharePoint desde o SharePoint Portal Server 2003 e com .NET desde a versão 1.0. Acompanhou a plataforma em todas as suas reinvenções, do portal de documentos on-premises ao SharePoint Online dentro do Microsoft 365, o que dá a ele uma leitura rara sobre o que muda de verdade e o que é apenas nome novo para o mesmo problema.
No início da carreira atuou em uma das maiores operações de e-commerce do país, em sistemas que não toleram degradação de performance nem indisponibilidade, essa origem definiu o critério que ele aplica até hoje: solução boa é a que sustenta volume real, integra com o legado que já existe e não quebra no pico.
Depois disso, passou por praticamente todo tipo de projeto corporativo, de portais e intranets de milhares de usuários a integrações críticas e automação de processos de ponta a ponta, sempre em grandes empresas e em desafios de alta exigência.
A marca do trabalho dele é a tradução entre tecnologia e negócio, levanta a necessidade real por trás do pedido do cliente, questiona o processo antes de automatizá-lo e desenha a solução pelo resultado esperado, não pela ferramenta disponível, é o que permite conversar com a diretoria sobre retorno e com o time técnico sobre arquitetura na mesma reunião.
Hoje lidera a frente comercial e estratégica da Trinapse e conduz a empresa no novo ciclo da inteligência artificial, com foco em agentes de IA e operação de processos assistida por IA para cooperativas de crédito, agronegócio e indústria. Escreve no blog da Trinapse desde 2019, com mais de 450 artigos sobre IA, SharePoint, Power Platform, Modern Workplace e transformação de processos, sempre a partir de projeto entregue e não de teoria.
