1

Estou utilizando a API do Google Maps para criar Markers em endereços que informo no arquivo js. Junto a essa API também tem o autocomplete do Google, para completar o endereço que estou digitando no input. O script está funcionando perfeitamente, tirando o fato de se eu colocar o endereço da minha casa por exemplo e clicar no marker que está em cima do meu endereço, ele puxa as últimas informações da variavel markers que contém os endereços. Ele puxa as informações do endereço de valinhos .. Teste o script direto no site http://www.brasilpark.com.br/unidades . Coloque o endereço da sua casa por exemplo, para entender o que estou falando. Abaixo o código js que estou utilizando:

mapa.js

var geocoder;
var map;
var marker;
var bounds = new google.maps.LatLngBounds();

var markers = [{"Estado":"Goiás","Cidade":"Goiânia","Bairro":"Jardim Goiás","Unidade":"CARREFOUR GOIÂNIA SUL","Endereco":"Avenida Deputado Jamel Cecílio, 3900 - Jardim Goías - Goiânia - GO","Lat":"-16.7093680","Lng":"-49.2325750"},{"Estado":"São Paulo","Cidade":"Valinhos","Bairro":"Jardim Maracanã","Unidade":"HOSPITAL E MATERNIDADE GALILEO","Endereco":"Av. Dr. Alfredo Zacarias, 1816 “ Jardim Maracanã - Valinhos “ SP","Lat":-23.0008593,"Lng":-46.99138019999999}]; //Tem vários endereços aqui

function initialize() {
    var latlng = new google.maps.LatLng(-23.5557040,-46.6627530);
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true
    });

    marker.setPosition(latlng);

    var infoWindow = new google.maps.InfoWindow();

       for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i].Lat, markers[i].Lng);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i].Unidade
        });

        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent('<h1>'+markers[i].Unidade+'</h1>'+'<br /><br />'+markers[i].Endereco);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }




}

$(document).ready(function () {

    initialize();

    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);
                }
            }
        })
    }

    $("#btnEndereco").click(function() {
        if($(this).val() != "")
            carregarNoMapa($("#txtEndereco").val());
    })

    $("#txtEndereco").blur(function() {
        if($(this).val() != "")
            carregarNoMapa($(this).val());
    })

    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());
                }
            }
        });
    });

    $("#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()
                    }
                }));
            })
        },
        select: function (event, ui) {
            $("#txtLatitude").val(ui.item.latitude);
            $("#txtLongitude").val(ui.item.longitude);
            var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
            marker.setPosition(location);
            map.setCenter(location);
            map.setZoom(16);
        }
    });

    $("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);
    });

});
0

0

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

Pesquise outras perguntas com a tag .