Conflict called Google Maps

Question

Well, on a page I call 3 modals of Bootstrap, each modal has a div with map inside, each map being clicked is created a Marker, and passed its address to a specific input text, each call with map function is in a file . js, when calling just one file, everything works fine, but when including the other js, none works.

The content of js is:

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

}

Answer 1

I managed to solve the map display problem, the problem now is:

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

I created a createMarker function and a getCoords function for each map, when clicking on the map a Marker should be created, but, is creating the Marker only on a map, by clicking on the other maps, does not create the Marker and the returned address is just 'Brazil'.

Vlw