1

Criei um formulário onde a pessoa digita onde ela está e logo em seguia é realizado uma busca e é definido uma rota.

A questão é: o ponto inicial dela depois que é definido a rota não está aparecendo o ícone que criei no inicio do código. Como faço para aparecer o ícone que criei no inicio da rota depois que é efetuado a busca? Ou como personalizar a partir do meu código um ícone para o ponto inicial e outro para o ponto final após a busca?

Script:

        // Definindo as variaveis
        var geocoder;
        var map;
        var marker = 'imagens/assets/marker.png';
        var directionsService = new google.maps.DirectionsService();

        // Iniciando o map
        function initialize() {
            var latlng = new google.maps.LatLng(-18.898123, -48.265920);
            var options = {
                zoom: 18,
                center: latlng,
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            };
            map = new google.maps.Map(document.getElementById("mapa"), options);                
            geocoder = new google.maps.Geocoder();

            // Marcador Personalizado
            marker = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                icon: marker
            }); 
            marker.setPosition(latlng);                

            // Parâmetros do texto que será exibido no clique;
            var contentString = '<h2>Sertões PetShop</h2>' +
            '<p>Av. Brasil, 2909 - B. Brasil</p>' +
            '<p>Uberlândia-MG' +
            '<p>38400-718</p>' +
            '<a href="http://www.marcozeropetshop.com.br" target="_blank">www.sertoespetshop.com.br</a>';
            var infowindow = new google.maps.InfoWindow({
              content: contentString,
              maxWidth: 700
            });

            // Exibir texto ao clicar no ícone;
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

            // Infowindow delay                
            setTimeout(function() { infowindow.open(map, marker) }, 1700);

            // Estilizando o map
            var styles = [
            { stylers: [ { hue: "#41a7d5" }, { saturation: 60 }, { lightness: -20 }, { gamma: 1.51 } ] },
            { featureType: "road", elementType: "geometry",
              stylers: [
                { lightness: 100 },
                { visibility: "simplified" }
              ]
            },
            { featureType: "road", elementType: "labels" }
            ];

            // crio um objeto passando o array de estilos (styles) e definindo um nome para ele;
            var styledMap = new google.maps.StyledMapType(styles, {
            name: "Mapa Style"
            });

            // Aplicando as configurações do mapa
            map.mapTypes.set('map_style', styledMap);
            map.setMapTypeId('map_style');
        }

        // Lendo o documento e iniciando a function map
        $(document).ready(function () {

            initialize();

                // CARREGANDO O MAPA
                function carregarNoMapa(endereco) {
                    geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                var latitude = results[0].geometry.location.lat();
                                var longitude = results[0].geometry.location.lng();

                                $('#txtEndereco').val(results[0].formatted_address);
                                $('#txtLatitude').val(latitude);
                                $('#txtLongitude').val(longitude);

                                var location = new google.maps.LatLng(latitude, longitude);
                                marker.setPosition(location);
                                map.setCenter(location);
                                map.setZoom(16);
                            }
                        }
                    })
                }

                // CAPTURANDO AS POSIÇÕES E RESULTANDO
                google.maps.event.addListener(marker, 'drag', function () {
                    geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) {  
                                $('#txtEndereco').val(results[0].formatted_address);
                                $('#txtLatitude').val(marker.getPosition().lat());
                                $('#txtLongitude').val(marker.getPosition().lng());
                            }
                        }
                    });
                });

                // Autocomplete dinâmico
                $("#txtEndereco").autocomplete({
                    source: function (request, response) {
                        geocoder.geocode({ 'address': request.term + ', Brasil', 'region': 'BR' }, function (results, status) {
                            response($.map(results, function (item) {
                                return {
                                    label: item.formatted_address,
                                    value: item.formatted_address,
                                    latitude: item.geometry.location.lat(),
                                    longitude: item.geometry.location.lng()
                                }
                            }));
                        })
                    },
                });

                // Obtendo a latitude e longitude
                $("#btnEndereco").click(function(){
                    var directionsDisplay = new google.maps.DirectionsRenderer();
                    var request = {
                        origin: $("#txtEndereco").val(),
                        destination: new google.maps.LatLng(-18.898123, -48.265920),
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            var leg = response.routes[0].legs[0];
                            var mStart = new google.maps.Marker({
                                icon: 'imagens/assets/marker.png',
                                position: leg.start_location,
                                map: map
                            });

                            var mEnd = new google.maps.Marker({
                                icon: 'imagens/assets/marker-final.png',
                                position: leg.end_location,
                                map: map
                            });                               
                            directionsDisplay.setDirections(response);
                            directionsDisplay.setOptions({
                                suppressMarkers: true,
                                polylineOptions: {
                                strokeWeight: 6,
                                strokeOpacity: 0.7,
                                strokeColor:  '#0C47A0' 
                            }
                          });
                          directionsDisplay.setMap(map);
                        }
                    });
                });        

                // Realizando a busca depois do clique
                $("form").submit(function(event) {
                    event.preventDefault();
                    var endereco = $("#txtEndereco").val();
                    var latitude = $("#txtLatitude").val();
                    var longitude = $("#txtLongitude").val();

                    alert("Endereço: " + endereco + "\nLatitude: " + latitude + "\nLongitude: " + longitude);
                });                
        });

Formulário:

<form method="post" action="">
    <fieldset>
        <div class="campos" style="margin: 15px;">
            <input type="text" id="txtEndereco" name="txtEndereco" size="50" style="padding: 15px; border: 1px solid #cdcdcd;" placeholder="Onde estou..."/>
            <input type="button" id="btnEndereco" name="btnEndereco" value="VER ROTA" style=" padding: 15px;" />
        </div>

        <div id="mapa"></div>

        <input type="hidden" type="submit" value="Enviar" name="btnEnviar" />

        <input type="hidden" id="txtLatitude" name="txtLatitude" />
        <input type="hidden" id="txtLongitude" name="txtLongitude" />
    </fieldset>
</form>

1 Resposta 1

2

No resultado DirectionsService, com o objeto response, você tem o que precisa em relação aos pontos de início e fim da rota:

var leg = response.routes[0].legs[0];

E então, personalize os dois pontos:

var mStart = new google.maps.Marker({
    icon: 'icone_a.png'
    position: leg.start_location,
    map: map
});

var mEnd = new google.maps.Marker({
    icon: 'icone_b.png'
    position: leg.end_location,
    map: map
});
7
  • Paulo, eu alterei no script mas parece que não funcionou... De uma olhada. Commented 29/04/2015 às 18:27
  • Sim, porque está no local errado. Os dois pontos devem ser adicionados logo depois de definido a variável leg. E esta, dentro do if que verifica se deu certo a rota. Commented 29/04/2015 às 18:29
  • Sim. Eu editei o script e agora funcionou. O problema é que ele ainda está mostrando aquele marker inicial que fica pré-definido quando o usuário visualiza o mapa antes de definir a rota. Como removo ele? Commented 29/04/2015 às 18:38
  • marker.setMap(null) Commented 29/04/2015 às 18:38
  • Funcionou, porém o meu infowindow, sumiu.... Como retorno ele para o aparecer no "leg.end_location"? Commented 29/04/2015 às 18:47

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 .