-
Conteúdo Similar
-
Por sNniffer
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//////////////////////////////////////////////////////////////////////
-
