Localize: Mecanismo de busca embedded

Atualizado em 31 Abr 2013.
Atenção: Este documento está em desenvolvimento.

A documentação aqui contida poderá sofrer mudanças nos próximos dias. Fique atento para estas alterações. Se desejar ser notificado quando publicarmos alguma alteração, envie uma mensagem para contato@epungo.com.br com seu endereço de email. Retornaremos para confirmar a solicitação.

Objetivos

Este artigo documenta o procedimento utilizado para a implantação do mecanismo de busca no mapa em um site.

Este documento está em desenvolvimento. Se tiver dúvidas ou desejar relatar um bug, queira por gentileza contactar-nos usando o email contato@epungo.com.br. Obrigado!



Pré-requisitos

Antes de inserir o código do embedded é necessário que o cliente final esteja cadastrado no site do Epungo e tenha permissões para divulgação dos imóveis. Com essa permissão, ele terá acesso à um token, que é o código para que sejam exibidos somente seus próprios imóveis. Caso ainda não tenha essa permissão cadastre-se em nosso site e envie um e-mail para contato@epungo.com.br solicitando a liberação.

Nota: Atualmente todos os imóveis disponibilizados pelo embedded serão, obrigatoriamente, divulgados em nosso site.



Layout do site

Defina o local do site onde o mecanismo será inserido e crie uma div. Para uma melhor experiência de seus usuários, recomendamos que a div, tenha o maior tamanho possível. O tamanho mínimo recomendado é de 1000 x 400, no entanto estes valores não são obrigadtórios. No exemplo abaixo a div, possui 600 pixels de altura.

Nota: Não devem haver elementos flutuando sobre a div.





Inclusão da API e inicialização do Epungo

Inclusão da API


O primeiro passo é chamar a API do Epungo. juntamente com a do Google Maps e a a biblioteca de geometria. Esses scripts devem ser chamados dentro do head. Veja um exemplo do código dessa chamada.
IMPORTANTE: O mapa não é servido juntamente com o aplicativo. Ele é um pré-requisito para a operação de nosso mecanismo de busca.



                    
			<head>
				<!-- Google Maps + Bibliotecas de Geometry e Places-->   
				<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry,places,visualization"></script>

				<!-- Epungo Embedded -->   
				<script type="text/javascript" src="http://www.epungo.com.br/apis/epungo"></script>
			</head>
        


Inicialização do Epungo


Ao inicializar o Epungo, além de enviar o token, recomendamos escolher a latitude, longitude e o zoom do mapa na hora de se carregar o aplicativo.


Exemplo de inicialização:
   
			// Inicialização do Epungo - Somente quando for instanciar o embedded
			var epungo_configs = {

				// Token que identifica seus imóveis
				'uid' : '12345678-90ab-cdef-1234-567890abcdef',

				// Configuração inicial do mapa
				'map': {
					'lat': -24.47165233149336,
					'lng': -48.18322321401939,
					'zoom': 7
				}
			};
			epungo_init(epungo_configs);
		


Customizações

O Epungo permite a customização de alguns de seus elementos.



Ícones


Você pode redefinir os 5 ícones que suportamos. Para tanto, basta passar um Objeto Literal contendo as chaves para os ícones: buildingRes, houseRes, houseCom, buildingCom e warehouseCom. À cada chave, você deve atribuir um objeto MarkerImage , conforme a especificação da API do Google Maps.


Veja como fica o exemplo de inicialização com a customização do ícone de Prédio Residencial.


Exemplo de inicialização com customização de um dos ícones:
			
			// Ícone customizado para Prédio Residencial
			var predioResidencial = 	{
				url: 'caminho/para/sua/imagem.png',
				size: new google.maps.Size(26, 26),   // Tamanho da imagem (26px x 26px)
				origin: new google.maps.Point(0, 0),    // Origem da imagem, no caso do uso de sprites. Se não tem certeza, deixe como está.
				anchor: new google.maps.Point(13, 13)   // Âncora (neste caso, o centro da imagem)
			};

            // Inicialização do Epungo - Somente quando for instanciar o embedded
            var epungo_configs = {

				// Token que identifica seus imóveis
                'uid' : '12345678-90ab-cdef-1234-567890abcdef',

				// Configuração inicial do mapa
                'map': {
                    'lat': -24.47165233149336,
                    'lng': -48.18322321401939,
                    'zoom': 7
                },

				// Exibir a caixa de navegação por texto
				// valores possíveis são 'default' para exibir somente no primeiro acesso, 
				// 'always' para exibir a cada nova carga e 'never' para nunca exibir.				
				'startLocationSelector': 'default',
				

				// Exibir os imóveis por padrão
				'showByDefault': true,

				// Exibir controles de Pontos de Interesse
				'showPOI': true,

				// Ocultar o botão de Link
				'showLinkButton': false,

				// Ocultar o o botão de Tela Cheia
				'showFullscreenButton': false,

				// Ocultar o tag de versão
				'versionTag': false,

				// Definir quais filtros serão permitidos na busca
				'filters': { 
					'residential': false, 
					'comercial': false, 
					'buy': true, 
					'rent': false 
				},

				// Colunas da lista: definir quais colunas serão exibidas na lista
				'list': { 
					'columns': { 
						'bedrooms': true, 
						'ensuites': false, 
						'parking_spaces': true, 
						'bathrooms': true, 
						'floor_area': false, 
						'area': false, 
						'sale_price': true, 
						'rental_price': false 
					} 
				}

				// Ícones
				'icons': {
					'buildingRes': predioResidencial
				}
            };
            epungo_init(epungo_configs);