Share
En lugar de solo mostrar la ubicación de su negocio en un mapa de Google, ¿por qué no ofrecer a sus usuarios la oportunidad de obtener indicaciones de manejo en la misma página? No es necesario que abran una nueva ventana del navegador y la encuentren ellos mismos, podemos hacerlo mejor que eso!
Usar la API de Google Maps dentro de su sitio web de WordPress es un proceso relativamente simple y exploraremos exactamente cómo hacerlo en este tutorial.
Nota: Vamos a escribir un poco de JavaScript aquí, ¡pero no te preocupes! Este es un tutorial de WordPress, así que siéntase libre de pasar por alto las partes de JavaScript :)
En tus funciones.php archivo (ubicado en el directorio raíz de su tema) - incluya el map.php archivo que creaste en la parte superior.
Accentsconagua
/ * functions.php * / include ('map / map.php'); Hay 3 cosas que queremos poder editar desde el área de administración.
infoWindow contenido. Esta es la burbuja blanca que se ve a menudo en Google Maps. Queremos poder editar el texto en la burbuja.!En map.php, enganchar en admin_init Para registrar nuestros ajustes:
función map_init () register_setting ('general', 'map_config_address'); register_setting ('general', 'map_config_infobox'); register_setting ('general', 'map_config_zoom'); add_action ('admin_init', 'map_init'); Ahora podemos configurar el texto del encabezado de nuestra sección en la página de opciones y todas las entradas que necesitamos.
función map_config_option_text () echo 'Establece las opciones para el mapa aquí:
'; // Longitud, valores de latitud para la función de destino map_config_address () printf ((''), get_option (' map_config_address ')); // El contenido de texto para la función InfoWindow Bubble map_config_infobox () printf ((''), get_option (' map_config_infobox ')); // El nivel de zoom inicial del mapa. función map_config_zoom () printf ((''), get_option (' map_config_zoom '));
Finalmente nos enganchamos en admin_menu para mostrar nuestra configuración en el administrador de WordPress:
función map_config_menu () add_settings_section ('map_config', 'Map Configuration', 'map_config_option_text', 'general'); add_settings_field ('map_config_address', 'Dirección - Longitud y latitud', 'map_config_address', 'general', 'map_config'); add_settings_field ('map_config_infobox', 'Map InfoWindow', 'map_config_infobox', 'general', 'map_config'); add_settings_field ('map_config_zoom', 'Map Zoom Level', 'map_config_zoom', 'general', 'map_config'); add_action ('admin_menu', 'map_config_menu'); Entra en tu área de administración, ahora deberías ver esto:
Dirección de destino
La API de Google Maps en realidad acepta direcciones regulares como 'Newgate Lane, Mansfield, Nottinghamshire, Reino Unido'. Sin embargo, encontrará que querrá ser más preciso con su destino (por ejemplo, lo más probable es que desee apuntar directamente a su negocio y no solo a la calle). Puede utilizar una muestra de Google Maps API V3 para buscar su destino. Arrastre el objetivo hasta que haya apuntado su punto. Cuando estés feliz, copia el Lat / Lng: valor en el campo de dirección en las opciones, por ejemplo 27.52774434830308, 42.18752500000007 (solo los números separados por comas, sin corchetes ni comillas)
Texto de InfoWindow
Haz esto lo que quieras. Su nombre de negocio sería una buena idea :)
Nivel de zoom
Un buen punto de partida es 10..
Haga clic en 'Guardar cambios' y cuando la página se actualice, puede verificar que la información se haya almacenado. Debería verse algo como esto ahora:
Cuando terminemos, tendremos 3 elementos: el Mapa, la Formar, y el Direcciones - así que en este tutorial he decidido dividirlos en 3 códigos cortos separados. Esto nos permitirá cambiar el orden / colocación de cada artículo sin tener que modificar ninguno de nuestros códigos PHP. Por ejemplo, puede decidir tener sus instrucciones sobre el mapa en lugar de debajo, o al lado, etc..
Shortcode 1: wpmap_map
Aquí registramos y ponemos en cola el archivo JavasScript de la API de Google Maps, así como el nuestro. maps.js expediente.
A continuación usamos el $ salida variable para almacenar nuestra mapa-contenedor div junto con algunos atributos de datos personalizados. ( datos-mapa-infowindow almacenará el contenido para el infowindow y mapa de datos-zoom representará el nivel de zoom inicial; ambos valores se devuelven utilizando WordPress get_option función).
Finalmente devolvemos el HTML generado para ser generado:
function wpmap_map () wp_register_script ('google-maps', 'http://maps.google.com/maps/api/js?sensor=false'); wp_enqueue_script ('google-maps'); wp_register_script ('wptuts-custom', get_template_directory_uri (). '/map/map.js', ",", true); wp_enqueue_script ('wptuts-custom'); $ output = sprintf ('', get_option (' map_config_infobox '), get_option (' map_config_zoom ')); devuelve $ output; add_shortcode ('wpmap_map', 'wpmap_map'); Shortcode 2: wpmap_directions_container
Aquí simplemente devolvemos un vacío. div con una identificación de dir-container. Esto actuará como el contenedor para las direcciones..
función wpmap_directions () $ output = ''; devuelve $ output; add_shortcode ('wpmap_directions_container', 'wpmap_directions'); Shortcode 3: wpmap_directions_input
Esto genera el marcado necesario para nuestro formulario..
Aquí también es donde estableceremos nuestra última opción personalizada: la Dirección de destino. Esta vez, usaremos un campo de formulario oculto para mantener el valor de Latitud / Longitud que ingresamos anteriormente en el Panel de administración.
función wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Para instrucciones de manejo, ingrese su dirección a continuación:
'; devuelve $ output; add_shortcode ('wpmap_directions_input', 'wpmap_directions_input'); Ahora que hemos configurado los códigos cortos, puede continuar y escribirlos en su Contáctenos página (o cualquier página que te guste).
Si obtiene una vista previa de la página ahora, todo lo que verá son los campos de entrada del formulario. Esto se debe a que aún no hemos escrito nuestro JavaScript que inicializará el Mapa y el div para las direcciones está actualmente vacío.
Nota: Antes de sumergirnos en el JavaScript, solo necesitamos agregar esto a nuestro style.css:
# mapa-contenedor ancho: 100%; altura: 400px;
¡Ahora es el momento de hacer que la magia suceda! Proporcionaré un resumen rápido de lo que vamos a hacer primero, y luego profundizaremos en el código..
WMmap y asignarle propiedades (algunas de las cuales extraeremos del marcado que creamos en los códigos cortos)en eso, será responsable de cargar el mapa y también de configurar algunos valores predeterminados, como el texto de infoWindow, el nivel de zoom y la posición inicial del marcador (todo desde las opciones de WordPress)Le explicaré cada parte del código paso a paso, pero no se preocupe si se pierde, lo pondremos todo junto al final..
Vamos a crear nuestro objeto y establecer algunas propiedades. Aquí simplemente estamos consultando el DOM para recuperar los elementos HTML que contienen los valores que necesitamos. Los nombres de propiedades que estamos usando deben ser muy claros y autoexplicativos (mapContainer es obviamente el contenedor de mapas, etc :))
Aquí también obtenemos un par de objetos de la API que usaremos más adelante cuando tratemos con Directions.
var WPmap = // Elementos HTML que usaremos más adelante! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- input '), unitInput: document.getElementById (' unit-input '), // Objetos de la API de Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / * continúa abajo * / Estos también son parte de nuestra WPmap Objeto, si no está seguro de cómo se relaciona todo, asegúrese de consultar la parte inferior de este tutorial para ver todo el código a la vez..
showDirections ()Esto se llama desde otro método que veremos más adelante, básicamente controla la inserción de las instrucciones en la página..
/ * dentro del objeto WPmap * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Indicaciones fallidas:' + dirStatus); regreso; // Mostrar direcciones WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng ()Esto se llama una vez de nuestro en eso método. Se establecerá la startLatLng propiedad igual a un google.maps.LatLng Objeto que podemos utilizar más adelante. Requiere que le proporcionemos valores separados de latitud y longitud, ¿cómo podemos hacer esto??
para ingresar. Esto significa que ahora podemos acceder al valor utilizando WPmap.toInput.value .división(","). Esto devolverá una matriz que contiene la latitud y la longitud como valores separados. / * dentro del objeto WPmap * / getStartLatLng: function () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem ()Debido a que hemos permitido a nuestros usuarios seleccionar si prefieren direcciones en Métrico o Imperial, usamos este método para configurar DireccionesUnitSystem a cualquiera MÉTRICO o IMPERIAL.
/ * dentro del objeto WPmap * / getSelectedUnitSystem: function () return WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; ,
obtener las direcciones()Este es el método que se llama cuando el usuario hace clic en el Obtener las direcciones botón.
deStr variable.dirRequest. Esto contendrá las opciones necesarias para proporcionar las instrucciones de conducción. origen - La dirección que el usuario ingresó.destino - los google.maps.LatLng Objeto que contiene los valores de latitud y longitud de su destino..modo de viaje - Aquí nos aseguramos de que solo estamos recuperando las instrucciones de conducción.Unidad de sistema - Especifique qué unidad de medida usar según la elección del usuario.WPmap.dirService.route - y pasarle dos parámetros: dirRequest - Este es el objeto que contiene nuestras opciones..WPmap.showDirections - La función de devolución de llamada que maneja la colocación de las instrucciones en la página../ * dentro del objeto WPmap * / getDirections: function () var fromStr = WPmap.fromInput.value; var dirRequest = origen: fromStr, destino: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
en eso()Este es el método que se llama cuando se carga la página. Es responsable de:
init: function () // obtener el texto de la ventana de información y el nivel de zoom var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); // llama al método que establece WPmap.startLatLng WPmap.getStartLatLng (); // configura el mapa. WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), centro: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // configura el marcador rojo pin marker = new google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // configura el contenido de la ventana de información infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marcador); // escuchar cuando se solicitan indicaciones google.maps.event.addListener (WPmap.dirRenderer, 'Directions_changed', function () infoWindow.close (); // cerrar el infoWindow marker.setVisible (false) inicial; // eliminar el marcador inicial); //en eso ;// <-- this is the end of the object. Si desea mostrar un mensaje agradable (como el que se ve a continuación) a sus usuarios después de que hayan solicitado instrucciones, simplemente copie el código debajo de la imagen en el detector de eventos dentro del en eso método.
Opcional Gracias mensaje:
// Obtenga la distancia del viaje var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // configura el contenido de la ventana de información antes de abrirlo de nuevo. infoWindow.setContent ('Gracias!
Parece que estás cerca '+ distanceString +' lejos de nosotros.
Las direcciones están justo debajo del mapa '); // vuelve a abrir infoWindow infoWindow.open (WPmap.map, marcador); setTimeout (function () infoWindow.close (), 8000); // cerrarla después de 8 segundos. ¿Sigues conmigo? Hemos hecho todo lo posible para terminar ahora y todo lo que queda por hacer es llamar al WPmap.init () Método cuando se carga la página. Agrega esto al fondo de map.js
google.maps.event.addDomListener (window, 'load', WPmap.init);
Hemos cubierto un mucho de terreno aquí, así que veamos cómo se ve cuando está todo junto.
var WPmap = // Elementos HTML que usaremos más adelante! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- input '), unitInput: document.getElementById (' unit-input '), startLatLng: null, // Objetos de la API de Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map : null, showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Indicaciones fallidas:' + dirStatus); regreso; // Mostrar direcciones WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng: function () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem: function () return WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; , getDirections: function () var fromStr = WPmap.fromInput.value; // Obtenga el código postal que ingresó var dirRequest = origen: fromStr, destino: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem ()); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: function () // obtener el contenido var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.getStartLatLng (); // configura el mapa. WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), // asegúrese de que aparezca como un centro de enteros: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // configura el marcador de marcador rojo = nuevo google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // configura el contenido de la ventana de información infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marcador); // escuchar cuando se solicitan indicaciones google.maps.event.addListener (WPmap.dirRenderer, 'Directions_changed', function () infoWindow.close (); // cerrar el primer infoWindow marker.setVisible (false); // eliminar el primer marcador // las cadenas de configuración que se utilizarán. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // establezca el contenido de infoWindow antes de abrirlo de nuevo. infoWindow. setContent ('Gracias!
Parece que estás cerca '+ distanceString +' lejos de nosotros.
Las direcciones están justo debajo del mapa '); // vuelve a abrir infoWindow infoWindow.open (WPmap.map, marcador); setTimeout (function () infoWindow.close (), 8000); // Ciérralo después de 8 segundos. ); //en eso ; google.maps.event.addDomListener (window, 'load', WPmap.init); Al escribir este tutorial, estaba probando mi código usando el tema de WordPress de TwentyEleven. Algo causaba que la flecha en la parte inferior de la ventana de información en el mapa se mostrara incorrectamente. Eso es porque .entrada de contenido img en línea 857 tiene un anchura máxima conjunto. Esto arruina la forma en que Google representa la ventana de información. Para solucionarlo, ingresa esto en algún lugar debajo de él:
# map-container img max-width: none;
