Imaginemos que tenemos un sitio web con la siguiente estructura:
index.html
blog.html
productos.html
contacto.html
Cuando nuestros visitantes entran a nuestro sitio atraves de una url por ejemplo: www.minegocio.com , el archivo que se carga por defecto es el index.html. Despues nuestros usuarios navegan por el sitio web por medio de links que los conducen a cada una de las secciones. Por ejemplo:
www.minegocio.com/blog.html
www.minegocio.com/productos.html
www.minegocio.com/contacto.html
Aqui todo bien. Pero que pasa, cuando un link no apunta al archivo correcto ó cuando el archivo ya no existe ó el usuario escribio mal la direccion. En todos estos casos seguramente los visitantes verán una página 404 algo similar a esta, dependiendo del navegador que usen:
Esta pagina solo les dice a los usuarios que la página o contenido que estaba buscando no fue encontrado. El usuario menos experimentado en este momento no sabe que paso o que hacer, lo cual es frustrante. No sería una mejor idea que cuando esto pasara, le indicaramos al usuario un poco más de información sobre lo que ha pasado y tal vez alguna sugerencia para tratar de resolver el problema.
De esta manera podemos guiar a nuestros visitantes de una manera correcta hacia donde podría encontrarse la información. Para esto es que existen las páginas 404. Si creas un archivo y le pones de nombre “404.html”, esa página siempre será cargada cada vez que los visitantes intenten acceder a un contenido que no existe o que los link estan incorrectos.
Dentro de este archivo podemos incluir toda la información necesaria de por que ocurrió ese error e información útil para guiarlo hacia otro contenido que podria interesarle
En internet existen sitios donde puedes descargar páginas 404, para incluirla en tu pagina web solo basta con buscar y descargar.
Si quieres crear tu mismo tu página 404 puedes obtener inspiración en google buscando por el término por ejemplo: “best 404 page”. Un sitio que tiene un buen top de esta pagina es :
Otra idea muy útil es incluir un formulario de búsqueda en estas paginas para darle al usuario una opción de buscar en sitio web. Si quieres saber como lograr esto necesitas saber un poco de javascript y el uso de las API de Google. Para una guia paso a paso puedes visitar este web:
Google, Yahoo y Bing son algunos de los motores de búsqueda más populares, con el único fin de ayudarnos a encontrar lo que buscamos en internet. Cada vez que buscas algo en uno de estos buscadores te muestra una serie de resultados paginados. En estos resultados pueden salir miles de paginas web. Pero alguna vez te has preguntado ¿ como funciona esto ?
En palabras simples cada buscador escanea la web indexando cada uno de las sitios web que encuentra. A cada uno de estos sitios encontrados, cada buscador usando sus propios métodos les asigna cierta “relevancia” y determina si es importante mostrar este sitio en sus resultados.
Con el tiempo las personas se dieron cuenta que realmente se podía ganar dinero si lograban que su sitio web saliera en los primeros resultados de los buscadores, fue entonces cuando de manera obvia llegaron a la conclusión de que necesitaban algún método para lograr que sus sitios fueran relevantes para los buscadores.
A esto se le conoce como posicionamiento en buscadores.
Nace el SEO y SEM
SEO: “Search Engine Optimization” El SEO se centra en los resultados orgánicos, es decir todo el esfuerzo necesario que tenemos que hacer para salir en los primeros lugares en los buscadores sin tener que pagar (por ejemplo a Google) Hacer SEO se le conoce por tener que hacer una serie de cambios en tu sitio web a nivel de código para que los buscadores pueden indexar (rastrear) correctamente tu web y de esta manera aparecer en los primeros lugares.
SEM: “Search engine marketing” SEM son los resultados de pago, es decir tu pagas para que tu página web siempre salga en los primeros resultados. Aqui manda el que tiene más dinero para salir primero y por lo general te cobran cada vez que alguien ha hecho click en tu anuncio.
Como puedes ver en la siguiente imagen, los anuncios pagados SEM siempre salen de primeros lugares y los de no pago (orgánicos) abajo de ellos
.
Algo interesante de notar es que el 70% de los clicks se hacen en el área de los resultados orgánicos SEO y el 30% en el área SEM. Por lo que un buen SEO es de mucha importancia.
El siguiente mapa de calor también nos da una buena idea de donde se hacen la mayoría de los clicks
Pero esto no significa que debemos dejar el SEM a un lado, por que aunque el SEM tiene menos porcentajes de clicks , el ratio de conversión (ventas) de SEM es más alto que SEO es decir los visitantes que llegan a tu sitio web por medio de SEM posiblemente tengan más probabilidad de comprar.
SEM ratio de conversion : 2.03%
SEO ratio de conversion: 1.26%
Una mezcla de las técnicas es muy saludable si quieres posicionar tu web, un tiempo haces SEO y otro SEM.
Existen personas que todavía que no les interesa estar en los buscadores ya sea por que tienen muchos seguidores en sus redes sociales ó por que sus ventas se han mantenido estables hasta el momento.
Pero considera esto, segun http://www.comscore.com/ se hacen 5000 millones de busquedas al dia en Google , esto es 3 millones de busquedas por minuto. Por lo que si tu no estas en los buscadores seguramente tu competencia si lo esta y estas perdiendo potenciales clientes.
Por ejemplo si tu tienes un hotel y escribes por ejemplo : “Hotel en Nicaragua” Todos lo resultados que veas serán todos tus competidores que ya tienen ventaja sobre ti.
Las redes sociales también juegan un papel importante para hacer SEO, por medio de ellas puedes crear viralidad de tus páginas al hacer que tus seguidores compartan tu web con sus amigos.
SEO y dispositivos moviles
Recientemente Google empezó a penalizar los sitios web que no estan optimizados para dispositivos móviles, por lo que tienes que hacer todo lo posible para que tu sitio web sea compatible con tablets, celulares, etc. por que tendra un gran impacto en tu estrategia de posicionamiento en buscadores.
¿ Por que razon Google hace esto ? bueno el siguiente tweet te responde:
60% of consumers use mobile search for purchase decisions – is YOUR website responsive? via @rivaliq
Recuerden que si ustedes estan en internet necesitan una estrategia de posicionamiento en buscadores SEO, no existe nada, ni nadie que no se beneficie de una estrategia SEO, no hacerlo es simplemente tonto por que seguramente tu competencia lo esta haciendo.
Si quieres aprender a fondo sobre posicionamiento en buscadores solo tienes que hacer una pequeña busqueda en Google sobre cursos SEO No te pierdas la explicación sencilla de google de como trabaja su buscador, esta muy interesante en el siguiente enlace:
Google en 2011 publico un articulo con unas guia que debes de tener en cuenta para crear contenido para tu web, aunque son un poco viejitas siguen siendo muy buenas practicas a seguir. Guia de como crear contenido de calidad de google 211
Google lee contenido dinamico
Ahora nos toca pasarnos al tema de javascript. Muchos expertos SEO recomiendan insertar lo menos posible contenido por medio de codigo javascript por que corremos el peligro que google no pueda indexar nuestro contenido, no pueda leer las tags y nuestros enlaces.
Pero un grupo de expertos SEO se dio a la tarea de hacer pruebas para comprobar si Google no puede indexar contenido generado con javascript, ¿ el resultado ? GOOGLE INDEXA TODOOO !!
Para leer los resultado y las pruebas visita el siguiente link:
Google analytics es una herramienta muy util para medir todo lo relacionado a SEO para tu pagina web, Si quieres entrar a este mundo tienes que aprender a usarla. Por suerte Google tiene unos cursos donde podras aprender todo lo necesario sobre esta herramienta, el unico detalle es que esta en ingles Analytics Academy
Videos de youtube en SEO
Youtube es una herramienta util para atraer trafico a tu web, optimizar tus videos es de vital importancia si quieres aumentar el traficoen tu web, Mauro Sicard ha escrito un articulo muy bueno de como debes optimizar tus videos.
SVG es un formato de imagen para dibujos vectoriales, el mismo tipos de archivos que usan los diseñadores gráficos con Adobe Illustrador. Gracias a los nuevos estandares web podemos usar este tipo de formatos de imagen y aprovechar todos los beneficios.
Beneficios
Tamaño de archivo muy pequeño y comprimido
La image se puede ver perfectamente en cualquier resolución de pantalla ya que puede ser escalado sin problemas, pudiendo verse perfecto en resoluciones retina display.
Tamaño del archivo reducido.
Normalmente ese tipo de archivos son creados con alguna herramienta de dibujos vectoriales como Adobe Illustrador. Ahora mismo existen muchos editores online de SVG donde puedes crearlos y editarlos.
Independientemente de la herramientas uses, tu puedes usar un SVG de 2 maneras:
Con un archivo físico con la extensión .svg
O con el codigo SVG que es similar a este:
Con cualquiera de los 2 puedes trabajar. Para usar el SVG solo tienes que usar la etiqueta img como con cualquier imagen normal y con CSS puedes controlar el tamaño. Ejemplo:
Después abre el archivo con tu editor de texto, por ejemplo yo estoy usando sublime text, cuando abras el archivo verás el código SVG que crea la imagen. Este código lo puedes copiar y pegar directamente en un archivo HTML y verás como el SVG aparece, El navegador lo cargara automáticamente.
Los archivos SVG pueden ser optimizados ya que como puedes ver en el código del archivo del “Che.svg” hay muchas etiquetas adicionales. Puedes usar la siguiente herramienta para esto.
También puedes dar estilo individualmente a cada elemento del SVG, tan solo tienes que asignar clases para poder dar tus estilos. Ten en cuenta que para dar estilo a los SVG tienes que usar propiedades CSS especiales para ellos, los cuales tienes que buscar en google por ejemplo.
Adicionalmente esta tabla te ayudará a entender lo que puedes hacer con los SVG dependiendo la manera en como lo insertes en tu página web.
Lo que puedes hacer
Object
Inline
Img
Background-image
CSS Manipulation
Yes
Yes
Some inline
Some inline
JS Manipulation
Yes
Yes
No
No
SVG Animation
Yes
Yes
Yes
Yes
Interactive SVG Animation
Yes
Yes
No
No
Usando Javascript con SVG
También podemos manipular los SVG con javascript como lo haríamos con un objeto normal HTML, podemos usar javascript puro o jquery para esto. En el siguiente ejemplo que encontre internet puedes ver cómo se selecciona el elemento y después se cambia su propiedad “fill”.
Habiendo escrito todo lo anterior, Deberías de ir considerando de usar svg en todos tus iconos y logos de tus proyectos web. Si por alguna razon aun no estas convencido visita este link : http://talks.brennaobrien.com/svg/#/
Como desarrollador web debes de saber lo que significa : “Desarrollo de proyectos ágiles”, Por que construir software no es como construir carros o casas.
El “Desarrollo de proyectos ágiles” es básicamente un conjunto de técnicas que te ayudarán a crear software de manera rápida y ordenada, evitando muchos problemas como por ejemplo entregar un producto que tu cliente no quiere.
Normalmente si no utilizas ninguna metodología ágil en tus proyectos lo que estás haciendo en un ciclo de vida en “cascada”. El ciclo de vida en cascada se componente por lo general de : Requisitos , análisis , diseño , evaluación, ect. se realizan (en teoría) de manera lineal, una única vez, y el inicio de una fase no comienza hasta que termina la fase anterior.
Su principal problema viene de que no deja claro cómo responder cuando el resultado de una fase no es el esperado. Por ejemplo ya llevas 4 meses programando y después viene el cliente y te dice que ahora los requisitos han cambiado por el mercado lo demanda. ¿ Que harias ? Seguramente comenzar todo el proceso de nuevo.
Para evitar esto las metodologías ágiles recomienzan dividir este proceso en pequeños ciclos. Para que tengas una mejor idea mira el siguiente video.
Después de ver el siguiente video seguramente ya tienes una idea sobre lo que se puede lograr con las metodologías ágiles. No esta demas decirte que todas las grandes compañías del mundo ya implementan estas metodologías y tu debes saber por lo menos que son.
Si siguiente video es un resumen muy bueno sobre todo esto de agilidad de proyectos, el cual te dara una vision general sobre todo este mundo. El video es una presentacion de Javier Garzás un tipo realmente muy buen en este tema.
Si despues de ver este video quieres aprender sobre este tema yo te recomiendo un curso muy bueno en https://miriadax.net/ , aunque este sitio no es el único en donde puedes aprender, una rápida búsqueda en google te dara multiples opciones.
Los politicos entienden internet y tienen a la gente correcta en su staff. Si crees lo contrario, estas perdido. Por favor ve este video es un poco largo pero te daras cuenta de como en la actualidad las elecciones son manipuladas de una manera totalmente nueva que no conocias usando las redes sociales.
Los chicos de platzi en publicado un video muy bueno donde te explican como funciona.
No puedo evitar no compartir este video de los chicos de platzi , es increible . Todo la información que entrega este video para que comiences este 2016 te sera de mucha utilidad.
Si tienes todavia idea que estudiar este 2016 recomiendo mucho este video de freddy
Suponiendo que los datos enviados al servidor fueron guardados con éxito en una base de datos, ahora viene la segunda parte de este proceso, recrear todos los overlays y nuestro mapa basados en estos datos, básicamente el proceso será inverso, a esto se le llama : Deserialización.
Los datos almacenados en la base de datos por lo general son obtenidos por medio de un método AJAX o algún servicio web, el cual debe devolver un objeto JSON de preferencia, con todos los datos correspondientes. Para los siguientes ejemplos vamos a suponer que el método AJAX nos ha devuelvo el siguiente objeto basado en los ejemplos anteriores.
Los datos de los overlay se encuentran en la propiedad “overlays”, que es un arreglo de objetos y los datos de nuestro mapa se encuentran en la propiedad “map”. Vamos a crear un método llamado “FakeAjax” el cual nos devolverá este objeto simulando un llamado AJAX al servidor, Para los siguientes ejemplos vamos usar como punto de partida el archivo de práctica número “29” el cual contiene creado el método “FakeAjax”.
Normalmente los objetos JSON que son devueltos como respuesta del servidor, vienen en formato cadena por lo tanto tienes que parsear esa cadena para convertirla a un objeto Javascript por ejemplo usando el método jQuery.parseJSON()
Deserializar Marker
En nuestro archivo de practica numero “29” tenemos el método “FakeAjax”, que nos devuelve un objeto con toda la información que necesitamos recrear. El cual ejecutamos en el evento “idle” de nuestro mapa.
google.maps.event.addListenerOnce(map, 'idle', function() { var data = FakeAjax(); });
Ahora necesitamos iterar sobre el arreglo de objetos que contiene la información que necesitamos en la propiedad “overlays”.
google.maps.event.addListenerOnce(map, 'idle', function() { var data = FakeAjax(); for (var i = 0 ; i < data.overlays.length ; i++) { switch(data.overlays[i].type) { case"marker": //marker break; case"polyline": //polyline break; case"rectangle": //rectanlge break; case"circle": //cirlce break; case"polygon": //polygon break } } });
Usando un ciclo FOR iteramos sobre el arreglo de objetos y para cada elemento del arreglo usamos su propiedad “type”, para saber que tipo de overlay se necesita deserializar usando un switch javascript. Ahora vamos a crear un método llamado “DeserializeMaker”.
google.maps.event.addListenerOnce(map, 'idle', function() { var data = FakeAjax(); for (var i = 0 ; i < data.overlays.length ; i++) { var objectDeserialized; switch(data.overlays[i].type) { case"marker": objectDeserialized = DeserializeMaker(data.overlays[i]); break; case"polyline": //polyline break;
case"rectangle": //rectanlge break; case"circle": //cirlce break; case"polygon": //polygon break; } objectDeserialized.setMap(map); } }); function DeserializeMaker (object) { var position = object.position.split(','); var latLng = new google.maps.LatLng(position[0],position[1]); var marker = new google.maps.Marker({ position: latLng, draggable:object.draggable }); return marker; }
En nuestro método “DeserializeMarker” estamos recibiendo como parámetro el elemento del arreglo actual sobre el cual se está iterando, este objeto tiene las propiedades que previamente habíamos serializado para recrear el marker, en este caso solo es “position” el cual es una cadena de texto con los valores LatLng de la position del marker separados por coma, usando el método split podemos obtener estos datos como un arreglo. Recuerda que el primer valor es Lat y el segundo es Lng. Este es un ejemplo del objeto que estamos recibiendo:
Después creamos nuestros objetos Latlng y Marker usando las clases de Google Maps, pasando como parámetro los valores obtenidos de la propiedad “position”. Nuestro método devuelve el objeto marker creado, el cual es asignado en la variable “objectDeserialized”, en esta variable asignaremos cada objeto creado por nuestros métodos y al final de cada ciclo FOR usaremos el método “setMap” para asignar el objeto creado al mapa ya que todos los overlays comparten el este metodo.
Deserializar rectangle
Con el overlay rectangle vamos a usar el método “DeserializeRectangle”. A partir de ahora solo haré referencia al código referente al switch para evitar repetir líneas de código continuamente para mostrar los siguientes ejemplos. Ya que el resto de codigo sera el mismo.
function DeserializeRectangle (object) { var bounds = object.bounds.split(','); var swLatLng = new google.maps.LatLng(bounds[0],bounds[1]); var neLatLng = new google.maps.LatLng(bounds[2],bounds[3]); var rectangleBounds = new google.maps.LatLngBounds(swLatLng,neLatLng); var rectangle = new google.maps.Rectangle({ bounds: rectangleBounds, editable:object.editable }); return rectangle; }
Nuestro método está recibiendo como parámetro el siguiente objeto :
La propiedad “bounds” contiene las coordenadas Latlng en formato cadena necesarios para crear el objeto bounds que necesitamos para recrear nuestro overlay, usando el método split convertimos los datos a un arreglo y los usamos para crear los objetos Latlng. Recuerda que estos puntos vienen en el siguiente orden : "lat_lo, lng_lo, lat_hi ,lng_hi" después de haber usado “toUrlValue” para serializarlo.
Con estos puntos LatLngs creamos nuestro objeto “bounds”, el que es usado para crear nuestro overlay.
Deserializar Polyline
Para el overlay Polyline usaremos el método “DeserializePolyline”
La propiedad “path” contiene todos nuestros puntos separados por comas en formato cadena, por lo tanto debemos de crear a partir de ellos un objeto MVCArray par recrear nuestro path.
El método encargado para de esta tarea será “DeserializeMvcArray” :
function DeserializeMvcArray(stringLatlng) { var arrayPoints = stringLatlng.split(','); var mvcArray = new google.maps.MVCArray(); for(var i= 0; i < arrayPoints.length; i+=2) { var latlng = new google.maps.LatLng(arrayPoints[i],arrayPoints[i+1]); mvcArray.push(latlng); } return mvcArray; }
Este método recibe el path en formato cadena, después creamos un arreglo a partir de esta cadena con el método split. Usando la clase MVCArray creamos un objeto, al cual dentro del ciclo FOR, agregamos cada punto Latlng creado, por medio del método push. También nota que nuestro ciclo for itera cada 2 elementos en el arreglo, esto es debido a que el primer elemento es Lat y el siguiente Lng y así sucesivamente, al terminar el ciclo for regresará el objeto MVCArray Creado. Ahora solo nos resta incluir este método en “DeserializePolyline”.
function DeserializePolyline (object) { var mvcArray = DeserializeMvcArray(object.path); var polyline = new google.maps.Polyline({ path: mvcArray, draggable:object.draggable, editable:true }); return polyline; }
En este método sólo nos resta pasar nuestro mvcArray creado a nuestro overlay para crear la polyline.
Deserializar Polygon
Para polygon utilizaremos de nuevo el método “DeserializeMvcArray”, debido a que el path del objeto serializado polygon también es una cadena con los valores separados por comas.
Nuestro método recibe el objeto serializado y crea el MVCArray usando la propiedad path con el método “DeserializeMvcArray”, el que después pasamos como parámetro para crear nuestro overlay.
Deserializar Circle
Para circle usaremos el método llamado “DeserializeCircle” y este es el objeto que recibirá este método :
function DeserializeCircle (object) { var center = object.center.split(','); var centerLatLng = new google.maps.LatLng(center[0],center[1]); var circle = new google.maps.Circle({ center: centerLatLng, radius: object.radius, draggable:object.draggable, editable:true }); return circle; }
La propiedad “center” es la que contiene nuestro punto Latlng en formato cadena, la cual convertimos a un objeto Latlng Google Maps la cual usamos en las opciones junto con “radius”.
Actualizar Map
Hasta ahora hemos deserializado todos los tipos de overlays, pero todavía nos queda actualizar el mapa con el nivel de zoom , tipo de mapa y el lugar exacto donde estaba el usuario cuando los datos fueron guardados. Usaremos el método llamado “UpdateMap”.
“UpdateMap” es llamado fuera del ciclo FOR debido a que los datos que necesitamos no se encuentran en un arreglo, sino en un objeto simple en la propiedad “map” con las siguientes propiedades:
function UpdateMap (object){ var bounds = object.bounds.split(','); var swLatLng = new google.maps.LatLng(bounds[0],bounds[1]); var neLatLng = new google.maps.LatLng(bounds[2],bounds[3]); var mapBounds = new google.maps.LatLngBounds(swLatLng,neLatLng); map.fitBounds(mapBounds); map.setZoom(object.zoom); map.setMapTypeId(google.maps.MapTypeId[object.mapType.toUpperCase()]); }
Como lo hemos hecho anteriormente primero creamos nuestro objeto bounds a partir de la propiedad “bounds” en formato cadena, la cual asignamos con el método “fitBounds” del objeto “map” , seguido asignamos el zoom y el tipo del mapa.
Al asignar el tipo de mapa estamos usando las constantes de mapa de la API que comúnmente son de esta manera :
google.maps.MapType.HYBRID
google.maps.MapType.ROADMAP
google.maps.MapType.SATELLITE
google.maps.MapType.TERRAIN
En nuestro código es un tanto diferente ya que nos basamos en que los objetos en javascript son arreglos asociativos, por lo tanto en nuestra línea de código podemos acceder al valor por medio de su “keyname” y usando el método “toUpperCase” de javascript, nos aseguramos de que sean en letras mayúsculas. Normalmente esto podría hacerse por medio de un switch pero creo que de esta manera nos ahorramos unos lineas de código.
Hasta aquí ha sido todo en este capítulo si quieres ver el ejemplo completo puedes abrir el archivo de práctica en la carpeta número “30”. Adicional a este tambien deberias ver el archivo de ejemplo número “31” el cual contiene una versión modificada con algunos campos adicionales y evento click en la lista de la izquierda para ubicar el overlay.
Usar GeoJson es una buena option
Una buena option adicional a todo lo visto antes es usar el formato GeoJson , el cual te permite guardar geometrias en una estructura estandar. Recomiendo leer sobre como crear and trabjar con este tipo de objectos por que de esa manera puedes exportar tus datos a muchos lados y muchas base de datos ya soportan este formato.
Para darte una idea de como funciona visita este editor online de GeoJson y revisa como el objecto es armado. En google tambien han escrito este articulo sobre GeoJson muy bueno sobre como usar este estandar dentro de google maps.
Una vez que entiendas como crear y manipular GeoJson recomiendo que estudies esta libreria http://turfjs.org/ , con ella podras hacer todo tipo de operaciones que pensabas que eran imposibles.
Ejemplos Adicionales
Obtener puntos Latlng contenidos dentro de un bounds
Aunque este libro no cubre lenguajes del lado del servidor, considero que el siguiente caso es muy común entre el desarrollo de aplicaciones de mapas, por tal razón he decidido incluirlo.
Habrá algunas ocasiones donde solo queremos mostrar overlays o markers que solo se encuentran dentro del actual viewport del mapa. Para lograr esto solo tienes que obtener el bounds del mapa el cual contiene un método llamado :
bounds.contains(latLng:LatLng) : El cual devuelve “true” si el Latlng que has pasado como parámetro se encuentra dentro de él.
Usando la API de Google Maps es realmente fácil saber esto, pero esto quiere decir que tienes que cargar todos los puntos Latlng antes en algun arreglo e iterar en cada uno. Lo conveniente seria que solo obtuvieras desde tu base de datos los puntos latlng que se encuentran dentro de este bounds.
Por ejemplo imagina que tienes un en tu base de datos una tabla llamada “markers” y esta tabla contiene 2 campos llamados “Latitude” y “longitud”, donde previamente han sido guardados estos valores para 1000 registros, en lugar de cargar estos mil registros de una sola vez en tu mapa , solo queremos obtener los que se encuentran dentro del bounds del mapa actual.
Para realizar esto tienes que enviar al servidor tu coordenadas del bounds actual del mapa, esto lo puedes hacer por medio del método :
bounds.toUrlValue(precision?:number) : que devuelve una cadena con los puntos en el siguiente orden : "lat_lo,lng_lo,lat_hi,lng_hi" .
Una vez que obtengas estos datos del lado del servidor solo tienes que ejecutar la siguiente consulta SQL, que sólo devolverá los registros con los Latlng que se encuentran dentro de bounds indicado.
SELECT * FROM markers
WHERE
Latitude < "lat_hi" AND
Latitude > "lat_lo" AND
Longitude < "lng_hi" AND
Longitude > "lng_lo";
La consulta anterior solo funcionara con puntos en norteamerica, si quieres un consulta que funcione nivel mundial por favor visitar el siguiente link de stackoverflow
Hay muchas respuestas recomiendo que verifiques todas y descubras cual funciona para ti. (Yo probe la del usuario vladimir)
Cálculo de áreas y distancias
Google Maps pone a nuestra disposición la librería “Geometry Library” con la cual podremos realizar cálculos de datos geométricos sobre la superficie de la Tierra. Similar a otras librerías con las que hemos trabajado anteriormente, tenemos que incluirla en nuestro proyecto de la siguiente manera:
El uso de los métodos de esta librería es tan sencillo como solamente llamar al método estático deseado para realizar la operación. He preparado 2 ejemplos de cómo usar esta librería para calcular áreas y distancias entre puntos en el mapa. Animo al lector a revisar el código para su comprender cómo funciona.
En el ejemplo de práctica en la carpeta número “32”, puedes encontrar un ejemplo de cómo se calcula la distancia entre 2 puntos. Al mover los markers sobre el mapa podrás ver como en el panel izquierdo se actualiza la distancia entre estos puntos, la cual es devuelta en metros.
Y en el ejemplo de práctica en la carpeta número “33”, podras encontrar el código de ejemplo de como calcular el área de las overlays en Google Maps, las cuales son expresadas en metros cuadrados. Si dibujas una overlay, podrás ver como se actualiza el panel izquierdo con la información del área. Para las polyline se esta calculando la distancia total en metros.
EasyLocator
Hace un tiempo atras cree un jquery plugin que te permite crear un mapa con puntos en el mapa de manera rapida y sencilla, por favor hecha un vistado talvez te pueda ser muy util. Jquery plugin google maps EasyLocator
