Pessoal,
Numa página chamado 3 modais bootstrap, em cada modal há um mapa, preciso que cada mapa ao ser clicado, seja criado um marker, capturado as coordenadas desse marker e exibido o endereço correspondente num input. Os mapas estão sendo exibidos corretamente, mas, esta sendo criado apenas o marker no primeiro mapa 'map', nos outros, ao clicar não está criando o marker e o endereço enviado para o input é apenas 'Brasil'.
Abaixo meu arquivo .js, com todas as funções.
A função createMarker..., cria o marker, e a função getCoords..., captura o endereço.
$(function () {
$("#rota_mapa_saida").on('shown.bs.modal', function () {
google.maps.event.trigger(map, 'resize');
});
$("#rota_mapa_coleta").on('shown.bs.modal', function () {
google.maps.event.trigger(map_coleta, 'resize');
});
$("#rota_mapa_destino").on('shown.bs.modal', function () {
google.maps.event.trigger(map_destino, 'resize');
});
});
var map
var map_coleta
var map_destino
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);
map_coleta = new google.maps.Map(document.getElementById('map-canvas-maker-coleta'), mapOptions);
map_destino = new google.maps.Map(document.getElementById('map-canvas-maker-destino'), mapOptions);
google.maps.event.addListener(map, "click", function(event) {
var lat_saida = event.latLng.lat().toFixed(6);
var lng_saida = event.latLng.lng().toFixed(6);
createMarker_saida(lat_saida, lng_saida);
getCoords_saida(lat_saida, lng_saida);
});
google.maps.event.addListener(map_coleta, "click", function(event) {
var lat_coleta = event.latLng.lat().toFixed(6);
var lng_coleta = event.latLng.lng().toFixed(6);
createMarker_coleta(lat_coleta, lng_coleta);
getCoords_coleta(lat_coleta, lng_coleta);
});
google.maps.event.addListener(map_destino, "click", function(event) {
var lat_destino = event.latLng.lat().toFixed(6);
var lng_destino = event.latLng.lng().toFixed(6);
createMarker_destino(lat_destino, lng_destino);
getCoords_destino(lat_destino, lng_destino);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
// Função que cria o marcador no maps Saída//////////////////////////////////////////////////////////////////////
function createMarker_saida(lat, lng) {
if (marker) {
// remover esse marcador do mapa
marker.setMap(null);
// remover qualquer valor da variável marker_saida
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_saida(lat, lng);
});
}
// Função que actualiza as caixas de texto no topo da página
function getCoords_saida(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;
}
});
}
// Função que cria o marcador no maps Saída///////////////////////////////////////////////////////////////////
// Função que cria o marcador no maps Coelta//////////////////////////////////////////////////////////////////
function createMarker_coleta(lat_coleta, lng_coleta) {
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_coleta, lng_coleta),
draggable: true,
map_coleta: map_coleta
});
// 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_coleta = marker.position.lat().toFixed(6);
var lng_coleta = marker.position.lng().toFixed(6);
// Atualiza Inputs
getCoords_coleta(lat_coleta, lng_coleta);
});
}
function getCoords_coleta(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_coleta_maps').value = adress;
//endereco_campo.value = adress;
}
});
}
// Função que cria o marcador no maps Coleta//////////////////////////////////////////////////////////////////
// Função que cria o marcador no maps Destino/////////////////////////////////////////////////////////////////
function createMarker_destino(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_destino: map_destino
});
// 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_destino(lat, lng);
});
}
function getCoords_destino(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_destino_maps').value = adress;
//endereco_campo.value = adress;
}
});
}
// Função que cria o marcador no maps Destino//////////////////////////////////////////////////////////////////////