Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alan Quidornne

Google Maps Api Autocomplete - Restringir Exibição Somente Para o Estado do Rio de Janeiro

Recommended Posts

Olá Amigos,

 

Tenho enfrentado uma séria dificuldade ao utilizar o serviço "Autocomplete" do Google Maps API.

 

Estou desenvolvendo um sistema de reserva de transfers(viagens de carro executivo) na qual o usuário informa a origem e destino de sua viagem e o sistema integrado com o Google Maps calcula o preço da viagem em questão .

 

A dificuldade que estou tendo é limitar a exibição dos resultados do Autocomplete para locais restritos ao estado do Rio de Janeiro.

 

Consigo tranquilamente limitar por país, mas para o território do Rio de Janeiro não consegui achar nenhuma função na documentação oficial que me atendesse nessa questão.

 

Segue código do autocomplete.

function initialize() {
    var options = {
        componentRestrictions: {
            country : "BR"
        }
    };

    directionsService = new google.maps.DirectionsService();

    var inputFrom = document.getElementById('from');
    var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
    autocompleteFrom.addListener('place_changed', function() {
        var place = autocompleteFrom.getPlace();
        placeId1 = place.place_id;
    });

    var inputTo = document.getElementById('to');
    var autocompleteTo = new google.maps.places.Autocomplete(inputTo, options);
    autocompleteTo.addListener('place_changed', function() {
        var place = autocompleteTo.getPlace();
        placeId2 = place.place_id;
    });
}

Se alguém souber e puder fazer a gentileza de me auxiliar nessa questão, ficarei bastante agradecido.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aparentemente essa opção não está contemplada na API. A solução mais aproximada que podes tentar é delimitar a área que pretendes através de coordenadas. Vê este exemplo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por clovis.sardinha
      Tenho uma consulta de autocomplete no bd que funciona no servidor local e não roda no servidor da web. 
      Ao enviar a consulta no servidor local  aparece no console :Fetch terminou o carregamento: GET ".../Cidade?cidade=sao%20paulo". A pesquisa é feita normalmente.
      Quando mando a mesma pesquisa para o servidor web(locaweb) aparece no console: Fetch terminou o carregamento: GET "..../Cidade?cidade=sao%2520paul".
      O número 25 aparece só no servidor web. Pelo que pesquisei 25 significa %, ou seja, está duplicando o caractere %. 
      Não consegui utilizar nenhuma função para evitar que isto ocorra. Alguém sabe se há alguma configuração no servidor web que possa ser alterada para evitar essa duplicação?
       
    • Por clovis.sardinha
      Estou em um impasse pois sei pouco de javascript. Estou fazendo um autocomplete com CI4 e Javascript.
      Consigo gerar, através do controllers/model do CI4 um arquivo em json, mas não consigo retorná-lo para o javascript para poder mostrar as opções para consulta. 
      O console.log mostra que estou obtendo o  json() { [native code] }.
      Segue os dois arquivos para ver se alguém me ajuda.
      //arquivo cidade.js async function carregar_cidade(valor) { if (valor.length >= 3) { //console.log("Pesquisar:" + valor); const dados = fetch('Testes/?cidade='+valor, { method: "get", headers: { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest" } }); const resposta = (await dados).json; console.log(resposta); var html = "<ul class='list-group position-fixed'>"; html += "<li class='list-group-item'>" + resposta['cid_nome'] + "</li>"; html += "</ul>"; } } <?php //arquivo Testes.php namespace App\Controllers; use App\Models\CidadeModel; /** NÃO MANDAR PARA O SERVIDOR - APENAS TESTES DE FUNÇÕES E OUTROS ELEMENTOS DO CI4 */ class Testes extends BaseController{ protected $tbCidades; public function __construct(){ $this->tbCidades = new CidadeModel(); } public function index(){ $request = \Config\Services::request(); $client = \Config\Services::curlrequest(); $cidades=[]; if($get=$request->getGet()){ $cities=$get['cidade']; $cidadeFiltrada=$this->tbCidades->getCidByName($cities); $cidades= json_encode($cidadeFiltrada); //dd($cidades); } echo view('Testes/testes'); } public function salvar(){ $request = \Config\Services::request(); if($post=$request->getPost()){ dd($post); } } } <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Autocomplete</title> </head> <body> <div class="container"> <h1 class="mt-4 mb-4">Formulário</h1> <form class="row g-3"> <div class="col-12"> <label for="cidade" class="form-label">Cidade</label> <input type="text" name="cidade" class="form-control" id="cidade" placeholder="Pesquisar cidade" onkeyup="carregar_cidade(this.value)"> </div> <span ></span> </form> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="assets/js/cidade.js"></script> </body> </html>
    • Por scsrat
      Preciso de ajuda com infowindow para polygonos multiplos está abrindo popup em todos com nome do ultimo lançamento somente, não estou dando conta em java, alguém se habilita?
       
      <?php      include 'export_xml.php'; ?> <html>     <head>         <meta charset='utf-8' />         <title>Google Maps: Storing Polygons in database</title>         <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDao9cuBBnlx14GWyG8ZnfZ1WjHj9oa6DA&callback=initMap"></script>         <script>                                  function initialize() {               var mapOptions = {                 zoom: 14,                 center: new google.maps.LatLng(-22.247791, -53.348142),                 mapTypeId: google.maps.MapTypeId.ROADMAP               };               var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);               var arr = new Array();               var polygons = [];               var bounds = new google.maps.LatLngBounds();                                             var xml = xmlParse(xmlString);               var subdivision = xml.getElementsByTagName("subdivision");                                                                for (var i = 0; i < subdivision.length; i++) {                 arr = [];                 html = [];                 var name = xml.documentElement.getElementsByTagName("subdivision").getAttribute("name");                 var address = xml.documentElement.getElementsByTagName("subdivision").getAttribute("address");                 var html = "<b>" + name + "</b> <br/>" + address + "<br><a href=# target=_blank>Clique aqui";                 //Tentando pegar dados dos polygons individuais                 var coordinates = xml.documentElement.getElementsByTagName("subdivision").getElementsByTagName("coord");                 for (var j = 0; j < coordinates.length; j++) {                   arr.push(new google.maps.LatLng(                     parseFloat(coordinates[j].getAttribute("lat")),                     parseFloat(coordinates[j].getAttribute("lng"))                   ));                   bounds.extend(arr[arr.length - 1])                 }                 polygons.push(new google.maps.Polygon({                   paths: arr,                   title: html,                   strokeColor: '#FF0000',                   strokeOpacity: 0.8,                   strokeWeight: 2,                   fillColor: '#FF0000',                   fillOpacity: 0.35                                    }));                 polygons[polygons.length - 1].setMap(map);                                  var infowindow = new google.maps.InfoWindow({                                        content: html // Tentando pegar dados dos polygons individuais                 });                                  google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {                     infowindow.open(map);                     infowindow.setPosition(event.latLng);                 });                                }                              // });               map.fitBounds(bounds);             }                          var xmlString = '<?php echo $textolinha; ?>';                          /**              * Parses the given XML string and returns the parsed document in a              * DOM data structure. This function will return an empty DOM node if              * XML parsing is not supported in this browser.              * @param {string} str XML string.              * @return {Element|Document} DOM.              */             function xmlParse(str) {               if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {                 var doc = new ActiveXObject('Microsoft.XMLDOM');                 doc.loadXML(str);                 return doc;               }               if (typeof DOMParser != 'undefined') {                 return (new DOMParser()).parseFromString(str, 'text/xml');               }               return createElement('div', null);             }             google.maps.event.addDomListener(window, 'load', initialize);                      </script>         <style>             #map-canvas,             body,             html {               height: 100%;               width: 100%;             }                      </style>     </head>     <body>                  <div id="map-canvas"></div>     </body> </html>  
       
      O include export_xml.php: Saida do xml
       
      <subdivisions> <subdivision name="teste1" address="0" > <coord lat="-22.246906181604235" lng="-53.343656079469014" /> <coord lat="-22.246160343589366" lng="-53.34298025442864" /> <coord lat="-22.246612168987966" lng="-53.34231238438393" /> <coord lat="-22.24577306351632" lng="-53.34163110329415" /> <coord lat="-22.246309297178513" lng="-53.34088544918801" /> <coord lat="-22.24709286679633" lng="-53.34152917935158" /> <coord lat="-22.247917069182467" lng="-53.342210460441365" /> <coord lat="-22.24876923872473" lng="-53.34288149840766" /> <coord lat="-22.248292595053044" lng="-53.343581554960544" /> <coord lat="-22.247442990211773" lng="-53.34287048089961" /> </subdivision> <subdivision name="teste2" address="0" > <coord lat="-22.24744605203327" lng="-53.3428707695716" /> <coord lat="-22.24664667240292" lng="-53.34224581487113" /> <coord lat="-22.24714566457059" lng="-53.341564533781344" /> <coord lat="-22.247922698585814" lng="-53.342200217317874" /> </subdivision> </subdivisions>  
    • Por klonder
      Olá a todos(as)!
      Estava há 3 dias pesquisando sobre como resolver um problema que estava enfrentando em meu sistema, que consistia no seguinte:
      Implantar um Combobox com dados vindos do banco. Esse combobox deveria ser editável e apresentar os valores em seu popup suspenso. À medida em que o usuário fosse digitando, o autocomplete faria a busca em todos os valores já cadastrados e mostraria os compatíveis (procedimento até então comum em qualquer autocomplete). Todavia, o combobox só poderia perder o foco caso o texto inserido fosse exatamente igual a um dos valores existentes no popup, ou seja, não poderia ser  inserido nada que já não estivesse cadastrado anteriormente e presente na lista de valores.
      Após muito pesquisar, cheguei a um resultado muito satisfatório que compartilho com vocês, visto que varri a internet inteira à procura desse código e não encontrei em lugar nenhum. PyQt5 é extremamente pobre em tutoriais, principalmente em português.
       
      Segue o código que poderá ajudar quem precise:
      from PyQt5 import QtGui, QtCore, QtWidgets from PyQt5.QtWidgets import QApplication, QWidget, QMainWindow, QComboBox, QLineEdit, QCompleter from PyQt5.QtCore import QSize, Qt, QSortFilterProxyModel, QStringListModel class Ui_Autocomplete(QMainWindow): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setGeometry(300, 200, 800, 600) self.setWindowTitle('Autocomplete com combobox') self.cboxEstado = QComboBox(self) self.cboxEstado.move(50, 50) self.cboxEstado.addItem("Acre") self.cboxEstado.addItem("Amazonas") self.cboxEstado.addItem("Amapá") self.cboxEstado.addItem("Pará") self.cboxEstado.addItem("Rondônia") self.cboxEstado.addItem("Roraima") self.cboxEstado.addItem("Tocantins") self.cboxEstado.addItem("Distrito Federal") self.cboxEstado.addItem("Goiás") self.cboxEstado.addItem("Mato Grosso") self.cboxEstado.addItem("Mato Grosso do Sul") self.cboxEstado.addItem("Alagoas") self.cboxEstado.addItem("Bahia") self.cboxEstado.addItem("Ceará") self.cboxEstado.addItem("Maranhão") self.cboxEstado.addItem("Piauí") self.cboxEstado.addItem("Pernambuco") self.cboxEstado.addItem("Paraíba") self.cboxEstado.addItem("Rio Grande do Norte") self.cboxEstado.addItem("Sergipe") self.cboxEstado.addItem("Paraná") self.cboxEstado.addItem("Rio Grande do Sul") self.cboxEstado.addItem("Santa Catarina") self.cboxEstado.addItem("Espírito Santo") self.cboxEstado.addItem("Minas Gerais") self.cboxEstado.addItem("São Paulo") self.cboxEstado.addItem("Rio de Janeiro") self.cboxEstado.setEditable(True) self.cboxEstado.completer().setCompletionMode(QCompleter.PopupCompletion) self.cboxEstado.completer().setFilterMode(Qt.MatchContains) self.cboxEstado.completer().setCaseSensitivity(QtCore.Qt.CaseInsensitive) self.cboxEstado.focusOutEvent = self.pedeuFoco self.leRegiao = QLineEdit(self) self.leRegiao.move(250,50) self.leRegiao.resize(200, 22) def pedeuFoco(self,event): occur = 0 for i in range(len(self.cboxEstado)): if self.cboxEstado.currentText() == self.cboxEstado.itemText(i): occur = occur+1 if occur == 0: self.cboxEstado.lineEdit().setFocus() self.cboxEstado.lineEdit().selectAll() else: #Retira o cursor do widget QComboBox.focusOutEvent(self.cboxEstado,event) if __name__ == '__main__': import sys app = QApplication(sys.argv) mainWin = Ui_Autocomplete() mainWin.show() sys.exit(app.exec_())  
       
    • Por ZioNN
      Estou tentando implementar lazy loading em um mapa do Google Maps que temos na home-page do site do cliente. É um iframe padrão do Maps no formato
       
      <iframe  src="https://www.google.com/maps/d/u/1/embed?mid=1qBlmrpdrcg46Esp-C88T1AMseNdz9k" width="100%" height="530"></iframe>
      Já tentei 3 plug-ins que encontrei em pesquisas na net, e nenhum deles funcionou. 

      O mapa é o item que mais pesa no carregamento inicial da home-page e está nos custando muito tempo e peso de loading.

      Foram:

      Lazyframe master
      Lazy Maps
      Jquery Lazy Master

      Qual a melhor solução para este caso, sem remover o mapa? 

      Obrigado
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.