Hola, hoy vamos a ver como integrar un mapa en tu sitio web usando MapQuest. La idea viene de un cliente el cual tuvo la necesidad de agregar un mapa a su sitio para su negocio. Y aquà les dejo como hacerlo usando HTML5, CSS, y JavaScript.
Registrarnos en MapQuest
Lo primero es crearse una cuenta en la pagina Mapquest Developer para poder obtener una llave que usaremos para cargar nuestro mapa. Para esto vamos a usar la oportunidad que nos brinda el sitio the utilizar su API con el plan gratis que consta de 15,000 transacciones al mes sin costo alguno.
Una vez registrados en el sitio, este nos dará una llave ya lista para usar, asà que luego nos dirigiremos a la documentación, y desde ese punto, podremos comenzar a incluir el mapa en el sitio.
- GuÃa Shopify 2.0: Cómo optimizar el LCP usando Image Filters
El rendimiento no es solo una métrica técnica; es la métrica de negocio más crÃtica en el eCommerce moderno. Asi que, «si tu tienda tarda más de 3 segundos en cargar, estás perdiendo dinero». En este guÃa de Shopify 2.0, nos enfocaremos en como optimizar el LCP (Largest Contentful Paint) usando «Image Filters». Esto no es mas que… Lee más: GuÃa Shopify 2.0: Cómo optimizar el LCP usando Image Filters - Crea un Banner Minimalista y Responsivo: GuÃa Maestra con HTML y Flexbox
En este tutorial, vamos a construir desde cero un banner minimalista y responsivo con estética «Premium«: tipografÃa limpia, colores sofisticados y un efecto de zoom interactivo que elevará el nivel de tus proyectos. Todo esto usando HTML5 y CSS moderno. ¿Lo mejor? Es tan ligero que tu Google PageSpeed te lo agradecerá. Para que nuestro… Lee más: Crea un Banner Minimalista y Responsivo: GuÃa Maestra con HTML y Flexbox
Incluyendo el Mapa
Para comenzar a usar el sitio seguiremos la documentación relacionada con la Web SDK, la cual se enfoca en la web. Lo primero es incluir el API con el estilo y el codigo. Para esto incluiremos esto en la cabezera de la pagina:
<html>
<head>
...
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
...
</head>
</html>Lo siguiente, después de esto sera agregar el código que cargara el mapa:
<head>
...
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
...
<script>
window.onload = function (){
L.mapquest.key = 'KEY';
L.mapquest.geocoding().geocode({
street: 'direccion',
city: 'ciudad nombre',
state: 'Estado',
postalCode: 'codigo postal'
}, cMap);
function cMap(error, response){
var location = response.results[0].locations[0];
var latLng = location.displayLatLng;
var map = L.mapquest.map('map', {
center: latLng,
layers: L.mapquest.tileLayer('map'),
zoom: 17
});
map.addControl(L.mapquest.control());
}
};
</script>
</head>
Hasta aquà como funciona el código. Lo primero es vamos a remplazar la zona que dice «KEY» con nuestra llave. Lo próximo sera incluir la dirección del lugar. Para ello vamos a remplazar la parte que dice «.geocode({…})». Si sigues el texto del código solo tienes que remplazar la dirección, ciudad nombre, estado, y código postal. Al final geocode llama a la función cMap donde vamos a encontrar lo que presentara el mapa en la pagina. Y por ultimo la opción «map.addControl» agrega los controles en la zona superior derecha para poder navegar por el mapa.
Agregando el icono de localización
Lo siguiente sera agregar el marcador para que el usuario sepa donde encontrar tu negocio. Para eso incluiremos la opción «textMarker» a la función cMap, justo debajo de la linea «map.addControl(L.mapquest.control())». Sin mas aquà esta: «los comentarios en el código explica el propósito de cada linea«.
...
map.addControl(L.mapquest.control());
L.mapquest.textMarker(latLng,{
text: 'Nombre del negocio',
subtext: 'direccion del negocio',
position: 'bottom',
type: 'marker',
icon: {
primaryColor: '#22407F',
secondaryColor: '#3B5998',
shadow: true,
size: 'md',
},
alt: 'Nombre de la image del marcador'
}).addTo(map);
...El resultado de este código es la imagen a continuación:
El Codigo HTML
Nuestro código HTML sobre como integrar un mapa a tu sitio web es bien simple. Este se va a componer de un simple «div» con un «id» que llamara al mapa, y aquà les dejo el código.
<body>
...
<div id="map" style="width:100%; height:530px;"></div>
...
</body>Un extra
Nuestro extra va dirigido al estilo para que personas especiales que deben usar el teclado. Para esto agregaremos un estilo «outline» para enfocar la parte del mapa con el teclado:
<style>
#map:focus, #map button:focus, #map .leaflet-marker-icon:focus, #map span:focus, #map a:focus{outline-style: solid !important; outline-color: red !important; outline-width: medium;}
</style>Y con esto terminamos y vamos por una tasa de café y a disfrutar el dia. Espero les guste.