Share
En este tutorial, pasaremos por el proceso de creación de un pequeño widget que permite a los usuarios recuperar instrucciones paso a paso a una ubicación específica. Utilizaremos la API de Google Maps, a través de JavaScript, para proporcionar esta funcionalidad bastante avanzada..
La única advertencia con el uso de Google Maps es que debemos solicitar una clave API, pero este es un proceso bastante trivial si ya tiene una cuenta Google / GMail. Desafortunadamente, debido a los requisitos de Google, debemos desarrollar el dominio que proporcionamos a Google, es decir, no podemos desarrollarlo en un servidor local. Afortunadamente para nosotros, el proceso será rápido y no pasaremos mucho tiempo en el servidor en vivo. Además, asegúrate de almacenar tu clave API en un lugar seguro porque no pude encontrar una manera de recuperarlas una vez generadas, aunque creo que solo puedes recrear una.
Antes de profundizar en el código, permítame discutir la razón detrás de esta idea. Como la mayoría de los desarrolladores, paso mucho tiempo en la web. Un subconjunto particular de sitios web que visito son empresas locales que ciertamente no tienen grandes recursos para dedicar al diseño web, pero esperamos que las personas que están desarrollando esos sitios vean artículos como este y se den cuenta de lo fácil que es incluir un contenido completo. mapa en cualquier página web. Casi cualquier sitio web que representa a una pequeña empresa tiene una página dedicada a informar a los usuarios cómo localizar su ubicación física. Muchas veces se obtiene un mapa con su ubicación fijada en él, lo que no ayuda a los usuarios que no conocen el área. En este tutorial vamos a cambiar eso y permitir que los usuarios ingresen su dirección y obtengan instrucciones paso a paso hacia cualquier dirección que queramos.
Ahora que la caja de jabón está fuera de lugar, veamos el código. Lo primero que debemos hacer es incluir la biblioteca de Javascript que contiene todos los métodos de Google Maps. Es probable que Google haya generado este código cuando creaste tu clave API, pero eso podría haber apuntado a la API de la versión 3 que todavía está en prueba beta. Aquí está el enlace a la versión 2 de la API, asegúrese de insertar su clave API. También vamos a incluir un archivo., aplicacion.js que mantendrá nuestras funciones personalizadas, almacené las mías en un directorio en el nivel raíz llamado js. El siguiente código va dentro de la sección de encabezado de tu página..
En la sección de cuerpo de nuestra página necesitamos un margen de beneficio limitado. Repasaré brevemente los bits requeridos, y puedes mirar el código fuente para ver la pelusa que incluí en mi demo. El primer elemento es un div vacío con un ID de map_canvas, Este es el marcador de posición al que señalamos las llamadas de Google Maps y generará todo el marcado del mapa dentro de ese elemento.
A continuación, creé un div para guardar la dirección de la organización y el formulario para que el usuario ingrese su dirección. Puede revisar este código, pero es bastante simple y no es muy difícil de discernir si se trata de una reunión. Asegúrate de mirar mi CSS para ver su estilo en mi demo.
Nuestra dirección
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Su dirección
Tenga en cuenta que estamos enviando esta página a sí mismo, esto es para que podamos procesar la página usando PHP si el usuario tiene JS deshabilitado. Si tienen habilitado JS queremos ejecutar una función., overlayDirections () La cual echaremos un vistazo un poco más adelante. La mayor parte de este código va al cuadro de selección que permite al usuario elegir su estado, lo he condensado por el bien de quienes imprimen este artículo, pero puede obtener el código completo de la descarga. Otras notas interesantes es que ponemos la tamaño y longitud máxima del campo de texto del código postal a 5. Lo último que hay que tener en cuenta es que hemos asignado ID y nombres a todos los elementos del formulario..
Bien, ahora podemos pasar a la carne de este tutorial, el código JavaScript. Casi todas las llamadas que haremos provienen de la API de Google Maps a la que hicimos referencia anteriormente. Google proporciona excelente documentación y código de ejemplo en su sitio web, así que asegúrese de verificarlo. Intentaré enlazar a páginas relevantes a medida que las uso..
Lo primero es que mientras tenemos nuestra página HTML abierta, podemos arrancar la función de inicialización configurando onload atributo. Nota: esto se puede hacer en jQuery usando el $ (documento) .ready () función.
Ahora nos vamos a mudar a la js / appication.js expediente. Lo primero que debemos hacer es establecer algunas variables. Es probable que algún evangelista de código me persiga por declarar variables globales, pero creo que en este caso deberíamos estar bien. Te daré el código y luego explicaré cómo usaremos cada uno..
var gdir, fromAddress, toAddress;
La función initialize () a la que llamamos anteriormente se usará para crear el Mapa en la página y colocar un marcador personalizado de nuestra ubicación.
Accentsconagua
/ * ** * Función Bootstrap para configurar el mapa y aplicar * marcador de empresa personalizado * / function initialize () if (GBrowserIsCompatible ()) // settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = nuevo GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // finalizar ajustes // configurar elementos map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("Directions")); // controlador de errores GEvent.addListener (gdir, "error", handleErrors); // establece el marcador de la compañía var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // establece map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); Lo primero que debemos hacer es verificar si el navegador es compatible con Google Maps, y para esto Google proporciona el GBrowserIsCompatible () en su API. En esencia, devuelve true si el navegador es compatible y nos permite pasar al resto de nuestra función. Decidí abstraer algunos de los valores a variables en la parte superior de la función para que esto pueda ser fácilmente portado a muchas aplicaciones.
// settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = nuevo GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // finalizar ajustes
los empresaMarkerImage es una cadena de la ubicación de una imagen pequeña que colocaremos en nuestra ubicación en el mapa. Creo que es un buen toque tener un ícono personalizado para representar a su empresa que personalizará la vista genérica de Google Map. Siguiente, companyLatLng contiene un objeto GLatLng correspondiente a una latitud, un punto de longitud en el mundo. No se quede sin comprar un dispositivo GPS para obtener estos números, podemos usar maps.google.com. En el cuadro de búsqueda, escriba su dirección y cuando encuentre la ubicación, haga clic en Enlazar Botón en la parte superior derecha del mapa. Desplácese por el primer cuadro de texto en la ventana modal y busque & sll = ... .
Puede copiar y pegar esas coordenadas en los parámetros de nuestro constructor GLatLng. Este es el punto en el mapa donde colocaremos nuestra imagen personalizada. La siguiente variable, empresaMarkerSize, contiene un objeto GSize que representa el ancho y la altura de su imagen de marcador personalizado. A continuación nos ponemos dirigirse cual es la direccion del negocio La variable final, defaultZoomLevel, simplemente le dice al mapa lo que desea que el nivel de zoom predeterminado oscile entre 1 y 18.
// setup elements map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("Directions")); La siguiente línea de código crea un objeto GMap2. Google describe esto como "la clase central en la API". Esto carga los datos del mapa y nos permite manipular lo que se muestra en el área del mapa. Toma un argumento un objeto DOM que apunta al elemento que contiene el mapa, #map_canvas. A continuación nos ponemos gdir para mantener el objeto GDirections. Esta es la interfaz que utilizamos para consultar direcciones de Google Maps. El constructor toma dos argumentos: un objeto de mapa y un objeto DOM en el que queremos colocar las instrucciones paso a paso. Elijo crear un div vacío abajo #direcciones llamado #direcciones.
// controlador de errores GEvent.addListener (gdir, "error", handleErrors);
Al utilizar servicios web, siempre corremos el riesgo de que se devuelva un error. Podemos hacer esto lo más libre de dolor posible con la clase GEvent. En este bit de código, estamos diciendo que si tenemos un error al obtener las instrucciones para ejecutar una función de devolución de llamada personalizada, manejarErrors en nuestro caso. Llamamos directamente a la función addListener () que registra una devolución de llamada. Toma 3 argumentos: un objeto de origen, una cadena que se refiere al tipo de evento en el que queremos ejecutar la devolución de llamada y un controlador que apunta a una función que queremos que se ejecute. La función, manejarErrors, Es algo que veremos más adelante..
// establece el marcador de la compañía var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // establece map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
Las últimas líneas en inicializar() se utilizan para crear nuestro marcador personalizado, elegí un Jayhawk encontrado en la página de inicio de KU. createMarker es una función de envoltorio que escribí para abstraer el código requerido para crear un marcador personalizado. Toma tres argumentos: una referencia a un objeto GLatLng donde queremos colocar la imagen, una cadena que representa la ruta a una imagen y una referencia a un objeto GSize que representa el tamaño de la imagen. A continuación, utilizamos el método setCenter () de la clase GMap2 que toma dos argumentos: un objeto GLatLng de las coordenadas en el centro y un entero para el nivel de zoom. Observe que estamos pasando las variables que configuramos en el bloque de configuración en la parte superior de la inicializar() función. La última línea de código utiliza el método addOverlay (). Esto es lo que realmente agrega la imagen personalizada al mapa..
los inicializar() La función hace mucho trabajo pesado, pero ciertamente puede demostrarlo. Después de que escribamos el createMarker () A continuación, podrá cargar la aplicación y ver algunos progresos. Pero primero recapitulemos el inicializar() función.
A continuación, crearemos una función de envoltorio que le quitará todo el dolor al crear un marcador con una imagen personalizada. La razón por la que elijo abstraer esto es porque es un proceso involucrado y podría saturar nuestra inicializar() Funciona aún más. Otro beneficio adicional es que podemos agregar múltiples marcadores muy rápidamente sin repetir mucho código.
/ * ** * Función Wrapper para crear / devolver un objeto marcador * con imagen personalizada * / function createMarker (latlng, imageURL, imageSize) var marker = new GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imageSize; devuelve nuevo GMarker (latlng, icon: marker);
Considerablemente más pequeño que nuestra primera función, pero igual de importante. Primero declaramos una nueva variable., marcador, y almacenar un objeto GIcon. Puede tomar una copia de dos argumentos, que es un objeto GIcon del que copiará las propiedades, y una imagen que es una cadena que representa una ruta a una imagen personalizada.. G_DEFAULT_ICON es una constante que representa un marcador predeterminado, y la imageURL proviene del bloque de configuración en inicializar(). Solo tenemos que configurar una propiedad más, iconSize, que es de tipo GSize, que representa el tamaño de nuestra imagen personalizada y también proviene del bloque de configuración. La última línea de código devuelve un objeto GMarker que toma dos argumentos, el tiempo y el icono. El primero, latlng es una referencia al objeto GLatLng que declaramos en el bloque de configuración. El siguiente argumento es para el objeto GIcon que acabamos de crear. Eso es todo lo que necesitamos hacer para que la parte del mapa de nuestra aplicación funcione. Ahora puede cargar la página y ver lo fácil que es obtener un buen mapa en nuestro sitio web.
Esta es, con mucho, mi parte favorita de este tutorial, que permite a los usuarios ingresar una dirección y recibir un mapa con la ruta resaltada y las indicaciones paso a paso. Mediante el uso de esta API, podemos condensar algo que requeriría miles de líneas de código y una increíble cantidad de recursos de procesamiento en solo un puñado de código.
/ * ** * Busca las indicaciones, las rutas superpuestas en el mapa, * e imprime paso a paso en #direcciones. * / function overlayDirections () fromAddress = document.getElementById ("street"). value + "" + document.getElementById ("city"). value + "" + document.getElementById ("state"). options [document. getElementById ("state"). selectedIndex] .value + "" + document.getElementById ("zip"). value; gdir.load ("from:" + fromAddress + "a:" + toAddress); La primera línea en realidad he extendido en cinco líneas para mayor claridad. En esencia, esto toma todos los valores de la forma y pone un espacio entre cada parte. Pensé que esto era mejor que pedirle al usuario que ingrese la dirección completa en un solo cuadro de texto porque eso puede resultar confuso.
La segunda línea hace uso de la gdir nos pusimos en inicializar(). Llamamos al método load () y pasamos un solo argumento de cadena, que es esencialmente lo que pasaríamos a maps.google.com a través del cuadro de búsqueda. los desde: y a: las palabras clave ayudan a decirle a Google qué dirección debe ser el punto de partida y cuál debe ser el punto final. Eso es todo lo que tenemos que hacer para las instrucciones, sí, ¡yo también me sorprendí! Si vuelves a visitar tu página puedes ver esto en acción..
A continuación vamos a declarar el handleErrors () función. Tomé esto del código de ejemplo de Google en su sitio web de API. No voy a entrar en detalles porque es bastante sencillo.
function handleErrors () if (gdir.getStatus (). code == G_GEO_UNKNOWN_ADDRESS) alert ("No se pudo encontrar una ubicación geográfica correspondiente para una de las direcciones especificadas. Esto puede deberse al hecho de que la dirección es relativamente nueva, o puede ser incorrecto. \ nCódigo de error: "+ gdir.getStatus (). code); de lo contrario, si (gdir.getStatus (). code == G_GEO_SERVER_ERROR) alert ("No se pudo procesar con éxito una solicitud de geocodificación o indicaciones, pero no se conoce la causa exacta del error. \ n Código de error:" + gdir.getStatus ).código); else if (gdir.getStatus (). code == G_GEO_MISSING_QUERY) alert ("El parámetro HTTP q faltaba o no tenía ningún valor. Para las solicitudes del geocodificador, esto significa que se especificó una dirección vacía como entrada. Para las solicitudes de direcciones, esto significa que no se especificó ninguna consulta en la entrada. \ n Código de error: "+ gdir.getStatus (). code); else if ((gdir.getStatus (). code == G_GEO_BAD_KEY) alert ("La clave proporcionada no es válida o no coincide con el dominio para el que se proporcionó. \ n Código de error:" + gdir.getStatus (). code) ; else if (alerta de gdir.getStatus (). == G_GEO_BAD_REQUEST) ("Una solicitud de indicaciones no pudo ser analizada con éxito. \ n Código de error:" + gdir.getStatus (). code); else alert ("Ocurrió un error desconocido"); Tiene una declaración larga if ... elseif ... else que comprueba muchos tipos de errores y alerta al usuario si ocurre alguno. Puede modificar esto si desea que la alerta sea menos técnica..
Como buenos desarrolladores web, debemos asegurarnos de que nuestro sitio web funcione para la mayor cantidad de usuarios posible, incluidos aquellos con JavaScript desactivado. En esta situación, opté por redirigir a aquellos con JS deshabilitado a Google Maps con la búsqueda realizada para que aún reciban instrucciones. Esto se hace usando PHP para evaluar el formulario y redirigir a Google Maps. En la parte superior de su página HTML inserte este código:
...
Primero tenemos un bloque de configuración de nuevo que solo tiene una variable para establecer, $ A. Esto es similar a lo que hicimos en JavaScript para dirigirse, pero necesitamos la misma cadena en PHP también. A continuación, tenemos una declaración if para verificar los datos POSTADOS, lo que significa que se envió nuestro formulario. Ahora tomamos los valores del formulario y los colocamos en una cadena con espacios y los almacenamos en una variable, $ DESDE. Luego almacenamos el valor del idioma para $ LOC, más sobre esto más adelante. los $ url La variable mantendrá la cadena que representa la URL de la consulta a Google. Tenga en cuenta que codificamos nuestros valores de forma url para que viajen de forma segura en la redirección. La última línea de código usa encabezados de PHP para redirigir al usuario a Google.
Como empresa, desea comunicarse con la mayor cantidad de personas posible y parte de ese proceso es el soporte de múltiples idiomas. En Google Maps, admitir otros idiomas no tiene costo adicional para nosotros.
Primero abra su página HTML e inserte el siguiente código entre las etiquetas de formulario.
... ...
Por supuesto, si desea eliminar cualquier idioma, simplemente elimine la etiqueta de opción, también puede cambiar el valor predeterminado moviendo el atributo seleccionado.
Moviéndose a js / application.js, Necesitamos hacer sólo dos cambios. Comenzando en el overlayDirections () funciona después de crear la cadena de la Dirección agregue esto para tomar el valor seleccionado del cuadro de selección de idioma y guardarlo en nuestra variable de idioma.
… Var language = document.getElementById ("language"). Options [document.getElementById ("language"). SelectedIndex] .value;… A continuación, agregue un argumento a la gdir.load () Función, esto toma un conjunto de opciones. En nuestro caso solo tenemos que declarar. lugar para que sepa el idioma y las unidades adecuadas para las instrucciones paso a paso.
... gdir.load ("from:" + fromAddress + "to:" + toAddress, "locale": language); ... Nota: Ya incluimos esto en la redirección de PHP y si desea deshabilitar esto solo establezca estáticamente $ LOC.
... $ LOC = 'en' ...
Eso es todo lo que necesitamos para esta característica increíble, y espero que haya aprendido un poco sobre Google Maps en el camino. Los desafío a ustedes, como desarrolladores, a continuar encontrando formas interesantes de integrar mapas en sus aplicaciones. Cada vez que un modelo es consciente de la ubicación, debe preguntarse si su proyecto tiene un uso para la representación visual en un mapa. Gracias por leer; Como siempre, estoy aquí para ayudar en los comentarios o en Twitter (@noahhendrix).
