Autor
|
Tema: Opciones con Google Maps [No salir de X país] (Leído 3,893 veces)
|
Phantasy
Desconectado
Mensajes: 51
Como siempre, pierde el que mas recibe.
|
Muy buenas, estoy creando un proyecto el cual una de las opciones que trae es el posicionamiento correcto de una direccion exclusivamente de un país. Para ello he creado el siguiente codigo. ZONA STYLE PARA EL MAPA <style > body{ color: #000; font-family: Arial; font-size: 14px; }
label{ font-family: Arial; font-size: 12px; font-weight: bold; text-align: left; }
.div-snippets{ display: none; background-color: #efefef; width: 900px; height: 500px; top: 50%; left: 50%; margin-top: -250px; margin-left: -450px; outline: 3px solid #afafaf; padding-left: 20px; overflow: auto; } </style> ZONA SCRIPT DEL MAPA <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> var map = null; var marker = null; var geocoder = null; var infowindow = null; // posicion predeterminada /*var ini_lat = 19.360927; var ini_lng = -99.183325;*/
// traducciones del tipo de localización var a_locations_type = new Array('APPROXIMATE', 'GEOMETRIC_CENTER', 'RANGE_INTERPOLATED', 'ROOFTOP'); a_locations_type[a_locations_type[0]] = ['El resultado devuelto es aproximado.']; a_locations_type[a_locations_type[1]] = ['El resultado devuelto es el centro geométrico de un resultado como una línea (por ejemplo, una calle) o un polígono (una región).']; a_locations_type[a_locations_type[2]] = ['El resultado devuelto refleja una aproximación (normalmente en una carretera) interpolada entre dos puntos precisos (por ejemplo, intersecciones). Normalmente, los resultados interpolados se devuelven cuando los códigos geográficos de la parte superior no están disponibles para una dirección postal.']; a_locations_type[a_locations_type[3]] = ['El resultado devuelto refleja un código geográfico preciso.'];
// traducciones del estatus de la geocodificación var a_geocode_status = new Array('ERROR', 'INVALID_REQUEST', 'OK', 'OVER_QUERY_LIMIT', 'REQUEST_DENIED', 'UNKNOWN_ERROR', 'ZERO_RESULTS'); a_geocode_status[a_geocode_status[0]] = ['Se ha producido un error al establecer la comunicación con los servidores de Google.']; a_geocode_status[a_geocode_status[1]] = ['La solicitud GeocoderRequest no es válida.']; a_geocode_status[a_geocode_status[2]] = ['Indica que la respuesta contiene un valor GeocoderResponse válido.']; a_geocode_status[a_geocode_status[3]] = ['La página web ha superado el límite de solicitudes en un período de tiempo demasiado breve.']; a_geocode_status[a_geocode_status[4]] = ['No se permite que la página web utilice el geocoder.']; a_geocode_status[a_geocode_status[5]] = ['No se pudo procesar una solicitud de codificación geográfica debido a un error del servidor. Puede que la solicitud se realice correctamente si lo intentas de nuevo.']; a_geocode_status[a_geocode_status[6]] = ['No se ha encontrado ningún resultado para esta solicitud GeocoderRequest.'];
// funciones para nuestro mapa function initGMaps() { var minZoomLevel = 6; // crear los objetos necesarios, primero el mapa map = new google.maps.Map(document.getElementById("map_canvas"), { mapTypeId: google.maps.MapTypeId.HYBRID, center: new google.maps.LatLng(40.4, -3.7), zoom: minZoomLevel, draggable:true });
// Bounds de España var strictBounds = new google.maps.LatLngBounds( new google.maps.LatLng(35.4, -10.1), new google.maps.LatLng(43.5, 4.7) ); // No dejar arrastrar mas alla de los limites establecidos google.maps.event.addListener(map, 'dragend', function() { if (strictBounds.contains(map.getCenter())) return; // We're out of bounds - Move the map back within the bounds var c = map.getCenter(), x = c.lng(), y = c.lat(), maxX = strictBounds.getNorthEast().lng(), maxY = strictBounds.getNorthEast().lat(), minX = strictBounds.getSouthWest().lng(), minY = strictBounds.getSouthWest().lat(); if (x < minX) x = minX; if (x > maxX) x = maxX; if (y < minY) y = minY; if (y > maxY) y = maxY; map.setCenter(new google.maps.LatLng(y, x)); }); // Limitar el zoom google.maps.event.addListener(map, 'zoom_changed', function() { if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); });
// la ventana de info (globo) infowindow = new google.maps.InfoWindow(); // el geocodificador geocoder = new google.maps.Geocoder(); // crear los eventos para acciones del mouse sobre el marcador (pin) /*google.maps.event.addListener(marker, "dragend", function() { showLatLongPos(); });*/ /* google.maps.event.addListener(map, "click", function(evento) { if(marker!=null){ marker.setMap(null); } //Obtengo las coordenadas separadas var latitud = evento.latLng.lat(); var longitud = evento.latLng.lng(); //Creo un marcador utilizando las coordenadas obtenidas y almacenadas por separado en "latitud" y "longitud" var coordenadas = new google.maps.LatLng(latitud, longitud); /* Debo crear un punto geografico utilizando google.maps.LatLng var marcador = new google.maps.Marker({position: coordenadas,map: map, animation: google.maps.Animation.DROP, title:"Un marcador cualquiera"}); document.getElementById("latitud").value=latitud; document.getElementById("longitud").value=longitud; marker = new google.maps.Marker({ map: map , position: new google.maps.LatLng(latitud, longitud) , draggable: true , visible: false }) showLatLongPos(); }); google.maps.event.addListener(marker, "click", function() { showLatLongPos(); });*/ }
function showAddress(address) { //OBTENER DIRECCION INTRODUCIENDOLA var address = document.getElementById('address').value; if (geocoder) { // obtener la Geo-Codificación Forward, // introduciendo un dato string (address) geocoder.geocode({'address': address, 'region': 'MX'} , function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { marker = new google.maps.Marker({ map: map , position: new google.maps.LatLng(latitud, longitud) , draggable: true , visible: false }) // preparar la info de la posición latitud y longitud var input = results[0].geometry.location.toUrlValue(); var latlngStr = input.split(",", 2); var lat_mx = parseFloat(latlngStr[0]); var lng_mx = parseFloat(latlngStr[1]); var latLong_mx = new google.maps.LatLng(lat_mx, lng_mx); // centrar el mapa en la posición encontrada map.setZoom(16); map.setCenter(latLong_mx); marker.setPosition(latLong_mx); marker.setVisible(true); // google.maps.event.trigger(marker, 'click'); // llenar con la info de la codificación inversa, o sea, la dirección humanamente legible var location_type_mx = results[0].geometry.location_type infowindow.setContent('<b style="color:black;">' + results[0].formatted_address + '</b>' + '<br/><br/><i style="color: #777;">' + a_locations_type[location_type_mx] + '</i>'); infowindow.open(map, marker); } else { alert(a_geocode_status[status]); } } else { alert(a_geocode_status[status]); } }); } // endif }
function showLatLongPos() { //MOSTRAR COORDENADAS // preparar la info de la posición latitud y longitud var location = marker.getPosition().toUrlValue(7); var latlngStr = location.split(",", 2); var lat_mx = parseFloat(latlngStr[0]); var lng_mx = parseFloat(latlngStr[1]); var latLong_mx = new google.maps.LatLng(lat_mx, lng_mx);
// obtener la Geo-Codificación Inversa, o sea, la dirección humanamente legible // introduciendo un dato latLong geocoder.geocode({'latLng': latLong_mx, 'region': 'MX'} , function(results) { var location_type_mx = results[0].geometry.location_type infowindow.setContent('<b style="color:black;">' + results[0].formatted_address + '</b>' + '<br/><br/><i style="color: #777;">' + a_locations_type[location_type_mx] + '</i>'); document.getElementById("address").value=results[0].formatted_address; infowindow.open(map, marker); }); // llenar los campos de texto con los valores latitud y longitud respectivamente document.getElementById("latitud").value = lat_mx; document.getElementById("longitud").value = lng_mx; } function guardar_ruta(){ alert("1"); var ruta2 = document.getElementById("address").value; alert(ruta2); document.getElementById("ruta").value=ruta2; alert("2"); }
// cargar el mapa automáticamente cuando se carga la página // es el equivalente a poner body onload="initGMaps();"> google.maps.event.addDomListener(window, 'load', initGMaps); </script> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> ZONA HTML DEL MAPA <!-- <input type="text" id="ruta" name="ruta" value="" /> -->
<label for="address">Ingresa una direccipon en este formato: (calle y número, municipio, provincia, pais)</label> <br/> <!-- Ejemplo: <i><b style="color: blue;">insurgentes sur 1677, gualupe inn, Ávaro obregón, distrito federal</b></i> --> <br/> <input type="text" id="address" name="address" value="" style="width: 650px;" /> <span id="span_address" style="color:red; font-size:14px; display:none;">Campo obligatorio, elija una ubicación y guárdela</span> <div id="search-adv" style="margin-top:15px; margin-right:30px;"> <a href="javascript:showAddress()" id="buscar" ><span>Buscar</span></a> <a href="javascript:guardar_ruta()" id="guardar_ruta" ><span>Guardar ubicación</span></a> </div> </p> <!-- Coordenadas y datos a recibir para convertirlos en código --> <p> <!-- La latitud/longitud aparecerán en los cuadros de texto después que <b style="color: blue;">muevas</b> el marcador dentro del mapa. --> </p> <p> <input style="width:180px" id="latitud" name="latitud" value="" type="hidden" /> <input style="width:180px" id="longitud" name="longitud" value="" type="hidden" /> </p> <div id="map_canvas" style="width: 900px; height: 500px; position:relative;"></div> <div id="map_canvas_transparente" style="width: 900px; height: 500px; display:none; position:absolute; top:572px; z-index:2" ></div>
<script type="text/javascript" charset="utf-8"> jQuery(document).ready(function() { jQuery('#address').focus(); }); </script> El codigo trae diversas opciones: - Posicionamiento inicial de un pais al cargar Google Maps, con un determinado zoom. - No dejar arrastrar el mapa fuera de los limites establecidos (long, lat). - Volver a centrar el mapa si se ha salido fuera de los limites. - Introducir un marker en el mapa a partir de introducir una direccion. - ESTA OPCION ESTA COMENTADA: introducir un marker al hacer clic dentro del mapa y obtener esa direccion. - Obtener coordenadas a partir de la dirección introducida o al hacer clic dentro del mapa. La cuestion es que todo lo hace bien, no me deja salir de mi pais a través de arrastrar el mapa. Pero si me deja salir de mi país introduciendo una direccion de fuera. Entonces mis conocimientos de Google Maps creo que han tocado a su fin y me gustaria saber si hay algunas lineas que permitan detectar el pais que es (a partir de coordenadas o de la direccion) que hemos introducido y que de un mensaje de error ya que se ha salido del pais que me interesa, volviendo a centrar el mapa en su inicio. Muchisimas gracias y lo siento por todo.
|
|
|
En línea
|
|
|
|
Phantasy
Desconectado
Mensajes: 51
Como siempre, pierde el que mas recibe.
|
Resuelto, lo pongo por si alguien lo necesita: CODIGO SCRIPT DEL MAPA: <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> var map = null; var marker = null; var geocoder = null; var infowindow = null; // posicion predeterminada /*var ini_lat = 19.360927; var ini_lng = -99.183325;*/
// traducciones del tipo de localización var a_locations_type = new Array('APPROXIMATE', 'GEOMETRIC_CENTER', 'RANGE_INTERPOLATED', 'ROOFTOP'); a_locations_type[a_locations_type[0]] = ['El resultado devuelto es aproximado.']; a_locations_type[a_locations_type[1]] = ['El resultado devuelto es el centro geométrico de un resultado como una línea (por ejemplo, una calle) o un polígono (una región).']; a_locations_type[a_locations_type[2]] = ['El resultado devuelto refleja una aproximación (normalmente en una carretera) interpolada entre dos puntos precisos (por ejemplo, intersecciones). Normalmente, los resultados interpolados se devuelven cuando los códigos geográficos de la parte superior no están disponibles para una dirección postal.']; a_locations_type[a_locations_type[3]] = ['El resultado devuelto refleja un código geográfico preciso.'];
// traducciones del estatus de la geocodificación var a_geocode_status = new Array('ERROR', 'INVALID_REQUEST', 'OK', 'OVER_QUERY_LIMIT', 'REQUEST_DENIED', 'UNKNOWN_ERROR', 'ZERO_RESULTS'); a_geocode_status[a_geocode_status[0]] = ['Se ha producido un error al establecer la comunicación con los servidores de Google.']; a_geocode_status[a_geocode_status[1]] = ['La solicitud GeocoderRequest no es válida.']; a_geocode_status[a_geocode_status[2]] = ['Indica que la respuesta contiene un valor GeocoderResponse válido.']; a_geocode_status[a_geocode_status[3]] = ['La página web ha superado el límite de solicitudes en un período de tiempo demasiado breve.']; a_geocode_status[a_geocode_status[4]] = ['No se permite que la página web utilice el geocoder.']; a_geocode_status[a_geocode_status[5]] = ['No se pudo procesar una solicitud de codificación geográfica debido a un error del servidor. Puede que la solicitud se realice correctamente si lo intentas de nuevo.']; a_geocode_status[a_geocode_status[6]] = ['No se ha encontrado ningún resultado para esta solicitud GeocoderRequest.'];
// funciones para nuestro mapa function initGMaps() { var minZoomLevel = 6; // crear los objetos necesarios, primero el mapa map = new google.maps.Map(document.getElementById("map_canvas"), { mapTypeId: google.maps.MapTypeId.HYBRID, center: new google.maps.LatLng(40.4, -3.7), zoom: minZoomLevel, draggable:true });
// Bounds de España var strictBounds = new google.maps.LatLngBounds( new google.maps.LatLng(35.4, -10.1), new google.maps.LatLng(43.5, 4.7) ); // No dejar arrastrar mas alla de los limites establecidos google.maps.event.addListener(map, 'dragend', function() { if (strictBounds.contains(map.getCenter())) return; // We're out of bounds - Move the map back within the bounds var c = map.getCenter(), x = c.lng(), y = c.lat(), maxX = strictBounds.getNorthEast().lng(), maxY = strictBounds.getNorthEast().lat(), minX = strictBounds.getSouthWest().lng(), minY = strictBounds.getSouthWest().lat(); if (x < minX) x = minX; if (x > maxX) x = maxX; if (y < minY) y = minY; if (y > maxY) y = maxY; map.setCenter(new google.maps.LatLng(y, x)); }); // Limitar el zoom google.maps.event.addListener(map, 'zoom_changed', function() { if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); });
// la ventana de info (globo) infowindow = new google.maps.InfoWindow(); // el geocodificador geocoder = new google.maps.Geocoder(); // crear los eventos para acciones del mouse sobre el marcador (pin) /*google.maps.event.addListener(marker, "dragend", function() { showLatLongPos(); });*/ /* google.maps.event.addListener(map, "click", function(evento) { if(marker!=null){ marker.setMap(null); } //Obtengo las coordenadas separadas var latitud = evento.latLng.lat(); var longitud = evento.latLng.lng(); //Creo un marcador utilizando las coordenadas obtenidas y almacenadas por separado en "latitud" y "longitud" var coordenadas = new google.maps.LatLng(latitud, longitud); /* Debo crear un punto geografico utilizando google.maps.LatLng var marcador = new google.maps.Marker({position: coordenadas,map: map, animation: google.maps.Animation.DROP, title:"Un marcador cualquiera"}); document.getElementById("latitud").value=latitud; document.getElementById("longitud").value=longitud; marker = new google.maps.Marker({ map: map , position: new google.maps.LatLng(latitud, longitud) , draggable: true , visible: false }) showLatLongPos(); }); google.maps.event.addListener(marker, "click", function() { showLatLongPos(); });*/ }
function showAddress(address) { //OBTENER DIRECCION INTRODUCIENDOLA var address = document.getElementById('address').value; if (geocoder) { // obtener la Geo-Codificación Forward, // introduciendo un dato string (address) geocoder.geocode({'address': address, 'region': 'MX'} , function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { marker = new google.maps.Marker({ map: map , position: new google.maps.LatLng(latitud, longitud) , draggable: true , visible: false }) // preparar la info de la posición latitud y longitud var input = results[0].geometry.location.toUrlValue(); var latlngStr = input.split(",", 2); var lat_mx = parseFloat(latlngStr[0]); var lng_mx = parseFloat(latlngStr[1]);//---------...... var lat_mx_int = parseInt(lat_mx); var lng_mx_int = parseInt(lng_mx); if(lat_mx_int>44 || lat_mx_int<36){ alert("Ha introducido un pais que no es donde nos encontramos 'ESPAÑA', inserte uno que lo sea"); return false; } if(lng_mx_int>5 || lng_mx_int<-11){ alert("Ha introducido un pais que no es donde nos encontramos 'ESPAÑA', inserte uno que lo sea"); return false; } /*...........----*/var latLong_mx = new google.maps.LatLng(lat_mx, lng_mx); // centrar el mapa en la posición encontrada map.setZoom(16); map.setCenter(latLong_mx); marker.setPosition(latLong_mx); marker.setVisible(true); // google.maps.event.trigger(marker, 'click'); // llenar con la info de la codificación inversa, o sea, la dirección humanamente legible var location_type_mx = results[0].geometry.location_type infowindow.setContent('<b style="color:black;">' + results[0].formatted_address + '</b>' + '<br/><br/><i style="color: #777;">' + a_locations_type[location_type_mx] + '</i>'); document.getElementById("address").value=results[0].formatted_address; // OBTENER DIRECCION BUENA Y MOSTRARLA BIEN, PARA ELIMINAR NUESTRA DIRECCION MALA var direccion = results[0].formatted_address; var array_comunidad = direccion.split(" ");//SEPARAR LA DIRECCION EN UNA ARRAY var numero_de_valores_del_array_array_comunidad = array_comunidad.length;//NUMEROS DE ELEMENTOS DEL ARRAY document.getElementById("comunidad").value=array_comunidad[numero_de_valores_del_array_array_comunidad-2];//RESTA PARA OBTENER LA COMUNIDAD //alert(array_comunidad[numero_de_valores_del_array_array_comunidad-1]); if(array_comunidad[numero_de_valores_del_array_array_comunidad-1]!="España"){ //PARA QUE NO SEA FUERA DE ESPAÑA alert("Ha introducido un pais que no es donde nos encontramos 'ESPAÑA', inserte uno que lo sea"); document.getElementById("address").value=""; initGMaps(); return false; } infowindow.open(map, marker); } else { alert("La dirección que ha introducido no la hemos podido encontrar"); //alert(a_geocode_status[status]); } } else { alert("No ha introducido ninguna dirección"); //alert(a_geocode_status[status]); } }); } // endif }
function showLatLongPos() { //MOSTRAR COORDENADAS // preparar la info de la posición latitud y longitud var location = marker.getPosition().toUrlValue(7); var latlngStr = location.split(",", 2); var lat_mx = parseFloat(latlngStr[0]); var lng_mx = parseFloat(latlngStr[1]); var latLong_mx = new google.maps.LatLng(lat_mx, lng_mx);
// obtener la Geo-Codificación Inversa, o sea, la dirección humanamente legible // introduciendo un dato latLong geocoder.geocode({'latLng': latLong_mx, 'region': 'MX'} , function(results) { var location_type_mx = results[0].geometry.location_type infowindow.setContent('<b style="color:black;">' + results[0].formatted_address + '</b>' + '<br/><br/><i style="color: #777;">' + a_locations_type[location_type_mx] + '</i>'); document.getElementById("address").value=results[0].formatted_address; infowindow.open(map, marker); }); // llenar los campos de texto con los valores latitud y longitud respectivamente document.getElementById("latitud").value = lat_mx; document.getElementById("longitud").value = lng_mx; } /*function guardar_ruta(){ var ruta2 = document.getElementById("address").value; alert(ruta2); //document.getElementById("ruta").value=ruta2; alert("2"); }*/
// cargar el mapa automáticamente cuando se carga la página // es el equivalente a poner body onload="initGMaps();"> google.maps.event.addDomListener(window, 'load', initGMaps); </script> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <!-- <input type="text" id="ruta" name="ruta" value="" /> -->
<label for="address">Ingresa una direccipon en este formato: (calle y número, municipio, provincia, pais)</label> <br/> <!-- Ejemplo: <i><b style="color: blue;">insurgentes sur 1677, gualupe inn, Ávaro obregón, distrito federal</b></i> --> <br/> <input type="text" id="address" name="address" value="" style="width: 750px;" /> <div id="search-adv" style="margin-top:15px; margin-right:40px;"> <a href="javascript:showAddress()" id="buscar" ><span>Buscar</span></a> <!-- <a href="javascript:guardar_ruta()" id="guardar_ruta" ><span>Guardar ubicación</span></a> --> </div> <span id="span_address" style="color:red; font-size:14px; display:none;">Campo obligatorio, rellene el campo de arriba con la ubicacion final</span> </p> <!-- Coordenadas y datos a recibir para convertirlos en código --> <p> <!-- La latitud/longitud aparecerán en los cuadros de texto después que <b style="color: blue;">muevas</b> el marcador dentro del mapa. --> </p> <p> <input style="width:180px" id="latitud" name="latitud" value="" type="hidden" /> <input style="width:180px" id="longitud" name="longitud" value="" type="hidden" /> <input style="width:180px" id="comunidad" name="comunidad" value="" type="hidden" /> </p> <div id="map_canvas" style="width: 900px; height: 500px; position:relative;"></div> <div id="map_canvas_transparente" style="width: 900px; height: 500px; display:none; position:absolute; top:572px; z-index:2" ></div>
<script type="text/javascript" charset="utf-8"> jQuery(document).ready(function() { jQuery('#address').focus(); }); </script>
|
|
|
En línea
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
Google Maps en 3D
Noticias
|
wolfbcn
|
0
|
2,268
|
27 Abril 2010, 21:28 pm
por wolfbcn
|
|
|
Google cierra el grifo gratuito al acceso intensivo a la API de Google Maps
Noticias
|
wolfbcn
|
2
|
3,855
|
28 Octubre 2011, 13:53 pm
por [u]nsigned
|
|
|
Nueva batalla entre Google y Microsoft: Google Maps deja de funcionar en ....
Noticias
|
wolfbcn
|
4
|
3,749
|
6 Enero 2013, 17:07 pm
por beholdthe
|
|
|
Google recula y devolverá el acceso a Google Maps a los usuarios de Windows ....
Noticias
|
wolfbcn
|
0
|
6,425
|
6 Enero 2013, 17:55 pm
por wolfbcn
|
|
|
Google Maps te dejará descargar todo un país para navegar sin conexión
Noticias
|
wolfbcn
|
0
|
1,640
|
16 Junio 2017, 14:35 pm
por wolfbcn
|
|