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.
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>