1

Eu tenho este código a baixo com a API do Google Maps usando vários lugares definidos dentro do Javascript. O meu problema é que tenho mais lojas para adicionar e são espalhadas por todo o Estado, então quero que quando o usuário abrir a página, pegue sua localização e coloque ela dentro da página, para que ele possa ver as lojas proximas.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPFf086alCsl076VnHe4ap3nEgCx4hZvU&libraries=places"></script>
<section class="breadcrumb">
    <div class="container">
        <ul>
            <li><a href=""><i class="fa fa-home"></i></a>
            <li>
                <a href="{{asset('lojas')}}" target="_self">
                    Lojas                   </a>
            </li>
        </ul>
    </div>
</section>

<div class="container">
    <h1 class="v1">Encontre a loja mais perto de você</h1>
</div>

<section class="conteudo-texto">
    <div class="container">
        <div id="map" style="height: 400px; width: 100%;"> <!-- onde o mapa vai aparecer-->
        </div>
        <script type="text/javascript">
            var locations = [ // definição de todas as lojas
                ['<div>'+
                '<h2 class="firstHeading"><b>Design Persianas<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Rua Hermes Pacheco, 1117 <br/> Hípica <br/> Porto Alegre <br/> 51 - 3352.4277</p>'+
                '</div>'+
                '</div>', -30.1669899,-51.2017468,17],

                ['<div id="content">'+
                '<div>'+
                '</div>'+
                '<h2 class="firstHeading"><b>Maison Decor<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Av. Pereira Passos, 1152 <br/> Cristal <br/> Porto Alegre <br/> 51 - 3265.4800</p>'+
                '</div>'+
                '</div>', -30.1034039,-51.2551846,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Soleil Persianas<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Rua Selso Maffessoni, 70 <br/> Aberta dos Morros <br/> Porto Alegre <br/> 51 - 3246.7685</p>'+
                '</div>'+
                '</div>', -30.1354365,-51.2165426,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Decorações Berti<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Rua Lima e Silva, 837 <br/> Cidade Baixa <br/> Porto Alegre <br/> 51 - 3226.6468</p>'+
                '</div>'+
                '</div>', -30.0399515,-51.2218371,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Cortinas Berti<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Av. Cristiano Fischer, 776 <br/> Bom Jesus <br/> Porto Alegre <br/> 51 - 3334.6881</p>'+
                '</div>'+
                '</div>', -30.0463707,-51.1741466,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Claudia Cortinas<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Av. Protasio Alves, 2038 <br/> Petropolis <br/> Porto Alegre <br/> 51 - 3024.4792</p>'+
                '</div>'+
                '</div>', -30.042944,-51.1909027,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Porto Windows <b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Rua Silva Jardim, 78 <br/> Auxiliadora <br/> Porto Alegre <br/> 51 - 3028.7788</p>'+
                '</div>'+
                '</div>', -30.0228021,-51.1925731,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Casa Bonita<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Rua Eudoro Berlink, 888 <br/> Auxiliadora <br/> Porto Alegre <br/> 51 - 3332.5627</p>'+
                '</div>'+
                '</div>', -30.0239334,-51.1907752,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Casa das Redes<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Rua Felipe Camarão, 469 loja 104 <br/> Bom Fim <br/> Porto Alegre <br/> 51 - 3312.1824</p>'+
                '</div>'+
                '</div>', -30.033244,-51.2120567,17],

                ['<div>'+
                '<h2 class="firstHeading"><b>Casa Rezende<b/></h2>'+
                '<div id="bodyContent">'+
                '<p>Rua Daltro Filho, 1130 <br/> Boa Vista <br/> Alegrete <br/> 55 - 3422.3386</p>'+
                '</div>'+
                '</div>', -29.7878098,-55.8041166,17],

            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10, // zoom padrão
                center: new google.maps.LatLng(-30.0575488,-51.247716,9.46), // inicio do zoom - AQUI QUE PRECISO MUDAR
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow(); //mostra as informações escritas

            var marker, i;

            for (i = 0; i < locations.length; i++) { // lista todos os lugares
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        </script>        </div>
</section>

1 Resposta 1

1

Utilize o serviço de Localização do Navegador

O browser vai solicitar ao usuário para ele permitir que use o serviço e caso ele permita, vai disparar a função e trocar a posição do mapa para a localização dele. Não tem como você fazer direto na inicialização do mapa.

No seu código altere para ficar parecido com isso:

<script type="text/javascript">

    // ... seus dados dos markers ....

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10, // zoom padrão
        center: new google.maps.LatLng(-30.0575488,-51.247716,9.46), // inicio do zoom - AQUI QUE PRECISO MUDAR
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow(); //mostra as informações escritas

    // tentar ativar a geolocalização do browser

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            map.setCenter(pos);

        }, function() {
            handleLocationError(true, infowindow, map.getCenter());
        });
    } else {
        handleLocationError(false, infowindow, map.getCenter());
    }

    function handleLocationError (browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Erro: O serviço de Geolocalização falhou.' :
                              'Erro: Seu browser não suporta geolocalização.');
        infoWindow.open(map);
    }

    // ... adiciona seus markers ....

</script>   

Ajuda do Google Maps Developers : https://developers.google.com/maps/documentation/javascript/geolocation

5
  • Muito obrigado, funcionou, mas tem mais uma coisa. Ele sempre diz que o Serviço falhou, estou suspeitando que eu precise um link Https para isso, está correto? Pode ver em persilux.escritoriomovel.com/lojas 22/08/2018 às 18:09
  • Tente debugar para ver se falhou por conta do browser ou do serviço. Eu ja tive problemas usando com localhost também.
    – Pagotti
    23/08/2018 às 11:33
  • Abri o seu site e a mensagem de erro no script diz que o método que ele chama precisa vir de endereço HTTPS. Se não conseguir uma alternativa, coloque https no seu site, tem opções gratuitas como o serviço do Let's Encrypt
    – Pagotti
    23/08/2018 às 11:40
  • Achei essa resposta no SO onde o cara usa um servidor externo para buscar a localização quando falha o HTTPS. Parece que funciona e o porém é que seu site vai fazer uma chamada a um serviço desconhecido e talvez isso possa abrir uma brecha de segurança já que seu site estaria sem o http, mas é uma alternativa.
    – Pagotti
    23/08/2018 às 11:48
  • Vou tentar com o letsencrypt, ja uso ele em outras aplicações. Estranho que se tento usar ele no localhost que o Google fornece, ele funciona. developers.google.com/maps/documentation/javascript/geolocation 25/08/2018 às 16:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .