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.