Segunda, 27 Janeiro 2014 22:12

Busca de CEP com Mapas

Escrito por 
Avalie este item
(7 votos)
Busca de CEP com Mapas - 5.0 out of 5 based on 7 votes

Inclusao de Busca CEP com Mapa - Seblod

Objetivo 

  1. Executar buscas de enderecos com base no CEP informado.
  2. Exibir atraves do Google Map o local solicitado.

Requisitos

Procedimentos

  1. Usaremos o cadastro de usuários para fazermos o Override. 
  • Como sabemos, em “Form & Content Type” , temos as opcoes Admin Form, Site Form, Intro e   Content. Usaremos o Site Form para fazer nossas inclusoes de campo.
  • Antes de comecarmos , devemos instalar o InputMask citado acima, pois usaremos os campos do tipo CEP e telefone , com o facilitador da mascara deste controle.
  • Feito isso,  abrimos nosso “Form & Content Type”, e clicamos em Site Form e criamos os campos conforme a figura.
  • Feito isso,  vamos criar nosso Override. Criamos um arquivo  Mainbody.php dentro do caminho nome_do_sitetemplatesseb_onepositionsusersite.
  • Usamos a pasta “user” pq ela e o nome do alias. Caso o seu seja diferente ou vc esteja criando em um outro Form & Content Type, e so mudar o caminho.
  • A segunda pasta “site”, e devido a termos incluido os campos no “Site Form”, dentre as opcoes da View do “Form & Content Type”.
  1. Fazendo o Override dos campos.
    1. Inlusao das “libs” js no seu override (copiar os arquivos mencionados no “REQUISITOS” para o caminho abaixo)

 

 <script type="text/javascript" src="/https://maps.google.com/maps/api/js?sensor=false"></script>

 <script type="text/javascript" src="/templates/nome_do_seu_template/js/gmaps.js"></script>

 <script type="text/javascript" src="/templates/nome_do_seu_template/js/cepw.js"></script>

  1. Inclusao da funcao que vai executar o CEP

          <script>

           jQuery(function() { 

                wscep({auto:false,'map':'map1'})

            })

         </script>

 

 

  1.   Montagem do “Esqueleto” do seu Override

 

  </head>

    <body>

        <div class="container_12">

           <div class="grid_12 form-cep">

                <form onsubmit="return false">

                    <div class="grid_4">

                        <div>

                        <?php echo $cck->renderfield('user_name'); ?>

                        </div>

                        <div>

                        <?php echo $cck->renderfield('user_username'); ?>

                        </div>

                        <div>

                        <?php echo $cck->renderfield('cep'); ?>

                        </div>

                         <div class="input-prepend cep-label">                      

                        </div>

                        <div>

                        <?php echo $cck->renderfield('endereco'); ?>

                        </div>

                        <div>

                        <?php echo $cck->renderfield('numero'); ?>

                        </div>

                        <div>

                        <?php echo $cck->renderfield('bairro'); ?>

                        </div>

                        <div>

                        <?php echo $cck->renderfield('cidade'); ?>

                        </div>

                        <?php echo $cck->renderfield('sub'); ?>

                        </div>     

                     </div>

                    <div class="grid_7 map" id="map1"></div>

            </div>

        </form>

        <div class="grid_12">

 

        1. Explicacao do Esqueleto 
          1. <div class="container_12">  Container principal para “abrigar” todos seus controles 
          2.         <div>

                        <?php echo $cck->renderfield('cep'); ?>

                        </div>

                         <div class="input-prepend cep-label">                      

                        </div>     /// Controles de entrada de dados e o botao de busca . O campo cep, devera ser o nome que vc atribuiu ao seu campo Seblod para armazenar esta informacao.   

          1.           </div>                 

                                              <div class="grid_7 map" id="map1"></div>

                                               </div>  ///// Controle para Exibir o mapa no seu Mainbody.php

 

 

Segue link do projeto pronto com os arquivos 

 

https://www.dropbox.com/sh/14b4n8d19e220dm/8P4U1v5R9P

Lido 5154 vezes Última modificação em Quinta, 30 Janeiro 2014 21:08

Deixe um comentário

Você precisa escrever no minimo 5 palavras!


Anti-spam: complete the task

2 comentários