Lançado Adianti Framework 7.6!
Clique aqui para saber mais
Conheça Características Quem usa Galeria Cursos Docs Fórum
Downloads
Posts Fique por dentro Sobre o Fórum Minha conta
Dificuldades Implementar Google Maps no Framework Boa Tarde Caros Colegas, estou com dificuldades para implementar qualquer script do Google Maps.Tenho utilizado classes php e scripts JavaScript como tambem exemplos diretamente do developers.google.com dentro de uma TPage e também o THtmlRenderer, mas sem sucesso. Grato Flávio Cardoso...
FC
Dificuldades Implementar Google Maps no Framework  
Flavio Cardoso 22/03/2017 (há 7 anos)
Boa Tarde

Caros Colegas,
estou com dificuldades para implementar qualquer script do Google Maps.Tenho utilizado classes php e scripts JavaScript como tambem exemplos diretamente do developers.google.com dentro de uma TPage e também o THtmlRenderer, mas sem sucesso.

Grato

Flávio Cardoso
Pacotão Dominando o Adianti Framework 7
O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado! Versão 7.4


Dominando o Adianti 7 Quero me inscrever agora!

Comentários (11)

NR
Nataniel Rabaioli       23/03/2017 (há 7 anos)

O que acontece exatamente Flavio? Verificou no console se há erros de javascript?
FC
Flavio Cardoso - AUTOR DO POST       23/03/2017 (há 7 anos)

Bom dia Nataniel

Já testei várias clases php de terceiros e não obtive sucesso. Verifiquei o console e não apresenta apenas ([Violation] Long running JavaScript task took 426ms) de javascript para a página.
agora estou testando o exemplo simples do Google Maps. Não apresenta nenhum erro de sintaxe ou de javascript mas não carrega nada
dentro da div o trecho de código segue amaixo: (Estou utilizando TPage) (Criei o mesmo código dentro de um arquivo PHP em separado e carrega normalmente)
  1. <?php
  2.        $div_mapa = new TElement('div');
  3.       $div_mapa->style = 'height:100%';
  4.       $div_mapa->id = 'mapa';
  5.  
  6.       TScript::create("var map;
  7.                        function initMap() {
  8.                        map = new google.maps.Map(document.getElementById(\"mapa\"), {
  9.                         center: {lat: -34.397, lng: 150.644},
  10.                         zoom: 8
  11.                       })
  12.                     }");
  13.                     
  14.       $script = new TElement('script');
  15.       $script->type = 'text/javascript';
  16.       $script->add('src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDVsPatOHAbS5GXF40AMiMnqP8uyRXQw9k&callback=initMap"');
  17.         
  18.       $this->form->add($div_mapa);           
  19. ?>


Abraços

Flávio Cardoso
NR
Nataniel Rabaioli       23/03/2017 (há 7 anos)

Você precisa definir uma altura para o $this->form:
  1. <?php
  2. $this->form->style = 'height:700px';
  3. ?>


E também alterar a forma como chama o script externo para:
  1. <?php
  2. TPage::include_js('https://maps.googleapis.com/maps/api/js?key=AIzaSyDVsPatOHAbS5GXF40AMiMnqP8uyRXQw9k&callback=initMap');
  3. ?>


Testei o seu exemplo com essas alterações e funcionou.
FC
Flavio Cardoso - AUTOR DO POST       23/03/2017 (há 7 anos)

Meu Guru

Obrigado pela gentileza, havia tentado tudo menos utilizar ao método 'include_js'.
às vezes focamos muito no problema e esquecemos algum detalhe periférico.
Finalmente deu tudo certo.

Abraços

Flávio
FF
Fernando Fernandes       09/04/2017 (há 7 anos)

Flavio poderia me explicar como implementou o maps?
FC
Flavio Cardoso - AUTOR DO POST       19/04/2017 (há 7 anos)

Olá Fernando Fernandes

Recebeu meu post?
FF
Fernando Fernandes       19/04/2017 (há 7 anos)

Flavio Cardoso, não recebi.
FC
Flavio Cardoso - AUTOR DO POST       19/04/2017 (há 7 anos)

Comecei com o exemplo do google maps https://developers.google.com/maps/documentation/javascript/mysql-to-maps.

Fiz algumas adaptações como segue:
fiz o include como auxiliado pelo Nataniel:
maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

em seguida criei uma função para pegar a latitude e longitude do endereço.
como segue:
  1. <?php
  2.    public function getGeoLoc($geolocal)
  3.    {     
  4.     $geolocal = urlencode($geolocal);               
  5.     try{        
  6.         $url = 'http://maps.google.com/maps/api/geocode/json?address='.$geolocal.'&sensor=false';
  7.         
  8.         $geocode = file_get_contents($url);
  9.                 
  10.         $resp = json_decode($geocode, TRUE);
  11.         
  12.         if($resp['status']=='OK'){
  13.             $lat  = $resp['results'][0]['geometry']['location']['lat'];
  14.             $long = $resp['results'][0]['geometry']['location']['lng'];
  15.               
  16.            if($lat && $long)
  17.            {
  18.                 $data_arr = array();                         
  19.                 array_push(
  20.                     $data_arr, 
  21.                         $lat, 
  22.                         $long                     
  23.                     );
  24.                 return $data_arr;
  25.            }else{
  26.                     new TMessage('error','Não foi possível detectar a Localização!');
  27.                     return false;                    
  28.                 }
  29.            }else{
  30.                     new TMessage('error','Não foi possível detectar a Localização!');
  31.                     return false;                   
  32.                 }
  33.         
  34.      }catch (Exception $e)
  35.         {
  36.             new TMessage('error', $e->getMessage());
  37.         }
  38.    }
  39. ?>

depois criei uma função criarXML para servir de marker para sinalizar os dados no mapa.
como segue:
  1. <?php
  2. public function criarXML($chave)
  3.     {
  4.         
  5.         $this->tipo = NULL;
  6.         
  7.         TTransaction::open('database');
  8.         $cliente = new Clientes($chave);
  9.         
  10.         $atividades = $cliente->getAtividades();
  11.                               
  12.         $lista_atividades = array();
  14.             foreach ($atividades as $atividade)
  15.             {
  16.                 $tipo[] = $atividade->id;                                          
  17.             }         
  18.             $tipo = implode(',',$tipo); 
  20.                 switch($tipo)
  21.                 {                                        
  22.                     case '1':
  23.                         $tipo = 'varejo';
  24.                     break;
  25.                     case '2':
  26.                         $tipo = 'industria';
  27.                         break;
  28.                     case '3':
  29.                         $tipo = 'atacado';
  30.                         break;
  31.                     case '4':
  32.                         $tipo = 'servico';
  33.                         break;
  34.                     case ['1','3']:
  35.                         $tipo = 'varejo_atacado';
  36.                         break;
  37.                     case ['1','4']:
  38.                         $tipo = 'varejo_servico';
  39.                         break;
  40.                     case '5':
  41.                         $tipo = 'representacao';
  42.                         break;                    
  43.                     default:
  44.                         $tipo = 'varejo';
  45.                 }
  47.         $dom = new DOMDocument("1.0", "UTF-8");
  48.         $node = $dom->createElement("markers");
  49.         $parnode = $dom->appendChild($node);
  50.         
  51.         $node = $dom->createElement("marker");
  52.         $newnode = $parnode->appendChild($node);
  53.         $newnode->setAttribute("nome",$cliente->razaosocial_cli);
  54.         $newnode->setAttribute("endereco", $cliente->endereco_cli." - ".$cliente->numero_cli);
  55.         $newnode->setAttribute("telefone", $cliente->fone_cli);
  56.         $newnode->setAttribute("lat", $cliente->latitude);
  57.         $newnode->setAttribute("lng", $cliente->longitude);
  58.         $newnode->setAttribute("tipo",$tipo);
  59.                                 
  60.         $dom->save("app/lib/include/xml/ticket.xml");
  61.         TTransaction::close();
  62.     }
  63. ?>

e o arquivo js:
latitude = null; longitude = null; latitude = parseFloat($('input[name = latitude]').val()); longitude = parseFloat($('input[name = longitude]').val()); if((!latitude)&&(!longitude)) { latitude = -23.5839073; longitude = -46.67873910000003; } var customLabel = { varejo: { label: 'V' }, industria: { label: 'I' }, atacado: { label: 'A' }, servico: { label: 'S' }, representacao: { label: 'R' }, varejo_atacado: { label: 'VA' }, varejo_servico: { label: 'VS' } }; function initMap() { var map = new google.maps.Map(document.getElementById('mapa'), { center: new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude)), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }); var infoWindow = new google.maps.InfoWindow; downloadUrl('app/lib/include/xml/ticket.xml', function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName('marker'); Array.prototype.forEach.call(markers, function(markerElem) { var name = markerElem.getAttribute('nome'); var address = markerElem.getAttribute('endereco'); var fone = markerElem.getAttribute('telefone'); var type = markerElem.getAttribute('tipo'); var point = new google.maps.LatLng( parseFloat(markerElem.getAttribute('lat')), parseFloat(markerElem.getAttribute('lng'))); var infowincontent = document.createElement('div'); var strong = document.createElement('strong'); strong.textContent = name infowincontent.appendChild(strong); infowincontent.appendChild(document.createElement('br')); var text = document.createElement('text'); text.textContent = address+' - '+fone infowincontent.appendChild(text); var icon = customLabel[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, label: icon.label }); marker.addListener('click', function() { infoWindow.setContent(infowincontent); infoWindow.open(map, marker); }); }); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {}


Espero que possa te ajudar.

abraços

Flávio
FC
Flavio Cardoso - AUTOR DO POST       19/04/2017 (há 7 anos)

Para pegar a latitude e longitude coloquei a chamada ao método getGeoLoc($geolocal) no evento onChange da seleção da cidade.
(Você pode colocar o evento em qualquer local). depois coloquei a chamada ao método criarXML no metodo onSave.
RC
Ricardo Câmara       04/11/2017 (há 6 anos)

Flavio Cardoso,
você pode postar o código completo?
Estou precisando usar o GMaps também.
FC
Flavio Cardoso - AUTOR DO POST       07/11/2017 (há 6 anos)

Olá Ricardo
Basicamente o código está completo....a posição no gooogle maps é carregada através da latitude e longitude.
Então eu utilizo dinamicamente, no me caso, os dados do cliente.
Isso é feito no onEdit quando eu seleciono o cliente para uma consulta ou no onSave quando salvo um cliente novo.
Assim eu implementei um método onCarregaGeoLoc que é disparado no evento setChangeAction do campo cidade
ou seja quando preenchido o campo, o evento carrega os dados necessários (endereço, numero, cidade, estado) que passa para o parametro
do método getGeoLoc($geolocal) e que devolve a latitude e longitude do endereço informado.
Feito isso, no método onEdit (Consulta o cliente que pega a latitude e longitude gravada) e no método onSave é salva a latitude e longitude junto com os demais dados do cliente.
Os dados como endereço, numero, telefone etc serão carregados através do método criarXML que por sua vez será utilizado para mostrar os dados co cliente no mapa.
Assim o Script do JavaScript (Arquivo js) carrega este arquivo XML(marker) e caso o campo latitude e longitude no formulario esteja preenchido o
script js renderiza o mapa na div "mapa" caso contrario ele utiliza uma latitude e longitude default(Pode ser qualquer uma).
Requisitos:
Criar o link da API do google no header de sua página:

TPage::include_js('https://maps.googleapis.com/maps/api/js?key=(Sua Chave)&callback=initMap');

TPage::include_js('app/lib/include/jsmap/googlemaps.js');


Talvez tenha que adaptar o código dentro das suas necessidades.
Caso queira consultar a documentação oficial de onde me orientei segue o link:
https://developers.google.com/maps/documentation/javascript/mysql-to-maps


Espero que te ajude.

Abraços e Sucesso.

Flávio Cardoso