Marker displays wrong infowindow

Asked

Viewed 120 times

1

I’m using the Google Maps API to create Markers at addresses I report in the archive js. Next to this API also has the autocomplete to complete the address I’m typing on input. The script is working perfectly, apart from the fact that I put the address of my home for example and click on marker that is on top of my address, it pulls the latest information from the variable markers which contains the addresses. It pulls the information from the address of Valinhos .. Test the direct script on the website http://www.brasilpark.com.br/unidades . Put the address of your home for example, to understand what I’m talking about. Below the code js that I’m using:

js map.

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

});
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.