0

Bom, numa página chamo 3 modais do Bootstrap, cada modal tem uma div com mapa dentro, cada mapa ao ser clicado é criado um marker, e passado seu endereço para um input text especifico, cada chamada com função do mapa está em um arquivo .js, ao chamar apenas um arquivo, tudo funciona bem, mas, ao incluir os outros js, nenhum funciona.

O conteudo do js é:

$(function () {
$("#rota_mapa_saida").on('shown.bs.modal', function () {
    google.maps.event.trigger(map, 'resize');
});

});


var map
var marker;


function initialize() { //Inicializa mapa
var mapOptions = {
  center: new google.maps.LatLng(-9.435530395596114,-36.09555605468743),
  zoom: 9,
  mapTypeId: 'roadmap'
};

map = new google.maps.Map(document.getElementById('map-canvas-maker-saida'), mapOptions);

google.maps.event.addListener(map, "click", function(event) {

var lat = event.latLng.lat().toFixed(6);
var lng = event.latLng.lng().toFixed(6);
createMarker(lat, lng);

getCoords(lat, lng);

});

}
google.maps.event.addDomListener(window, 'load', initialize);



// Função que cria o marcador
function createMarker(lat, lng) {
   if (marker) {
      // remover esse marcador do mapa
      marker.setMap(null);
      // remover qualquer valor da variável marker
      marker = "";
   }

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

// Evento que detecta o arrastar do marcador para
google.maps.event.addListener(marker, 'dragend', function() {
  marker.position = marker.getPosition();
  // os valores das caixas de texto no topo
  var lat = marker.position.lat().toFixed(6);
  var lng = marker.position.lng().toFixed(6);
  // Atualiza Inputs
  getCoords(lat, lng);
});

///////////////////////////////////////////////////////
//Captura o endereço
var latlng = lat + "," +lng;
var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlng + "&sensor=true";
$.getJSON(url, function (data) {
    for(var i=0;i<data.results.length;i++) {
        var adress = data.results[i].formatted_address;
        //alert(adress);
        document.getElementById('endereco_saida_maps').value = adress;
        endereco_campo.value = adress;
    }
});   

}

1 Resposta 1

0

Consegui resolver o problema de exibição dos mapas, o problema agora é:

    $(function () {
$("#rota-1").on('shown.bs.modal', function () {
    google.maps.event.trigger(map, 'resize');
});


    $("#rota-2").on('shown.bs.modal', function () {
        google.maps.event.trigger(map_coleta, 'resize');
    });


$("#rota-3").on('shown.bs.modal', function () {
    google.maps.event.trigger(map_destino, 'resize');
}); 
});


var map
var map_2
var map_3

var marker;


function initialize() { //Inicializa mapa
var mapOptions = {
  center: new google.maps.LatLng(-9.435530395596114,-36.09555605468743),
  zoom: 9,
  mapTypeId: 'roadmap'
};

map = new google.maps.Map(document.getElementById('map-canvas-maker-1'),      mapOptions);
map_2 = new google.maps.Map(document.getElementById('map-canvas-maker-2'), mapOptions);
map_3 = new google.maps.Map(document.getElementById('map-canvas-maker-3'), mapOptions);



google.maps.event.addListener(map, "click", function(event) {
  var lat = event.latLng.lat().toFixed(6);
  var lng = event.latLng.lng().toFixed(6);
  createMarker_1(lat, lng);
  getCoords_1(lat, lng);
});


}
google.maps.event.addDomListener(window, 'load', initialize);


// Função que cria o marcador
function createMarker_1(lat, lng) {
       if (marker) {
          // remover esse marcador do mapa
          marker.setMap(null);
          // remover qualquer valor da variável marker
          marker = "";
       }

       marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          draggable: true,
          map: map //referência ao mapa
       });


    google.maps.event.addListener(marker, 'dragend', function() {
      marker.position = marker.getPosition();
      // os valores das caixas de texto no topo
      var lat = marker.position.lat().toFixed(6);
      var lng = marker.position.lng().toFixed(6);
      // Atualiza Inputs
      getCoords_1(lat, lng);


    });

}
function getCoords_1(lat, lng) {
            ///////////////////////////////////////////////////////
        //Captura o endereço
        var latlng = lat + "," +lng;
        var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlng + "&sensor=true";
        $.getJSON(url, function (data) {
            for(var i=0;i<data.results.length;i++) {
                var adress = data.results[i].formatted_address;
                document.getElementById('endereco_maps').value = adress;
            }
        });   
}

Criei uma função createMarker e uma função getCoords para cada mapa, ao clicar no mapa deverá ser criado um marker, mas, está criando o marker apenas em um mapa, ao clicar nos outros mapas, não cria o marker e o endereço retornado é apenas 'Brasil'.

Vlw

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 .