Como integrar un mapa a tu sitio web

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.

Cómo Eliminar y Prevenir el Spam de Comentarios en WordPress
Esta es una pequeña guía definitiva para blindar tu sitio web y proteger tu SEO de los comentarios no deseados. Si tienes un sitio web en WordPress, es probable que ya hayas lidiado con el spam de comentarios. El spam no solo es molesto; sino que perjudica la imagen de tu marca y, si se… Lee más: Cómo Eliminar y Prevenir el Spam de Comentarios en WordPress
Como encolar javascript en WordPress
Cuando desarrollamos plugins o temas para WordPress, uno de los aspectos más importantes es cómo encolar javascript en nuestros plugins o temas de wordpress. Un uso incorrecto de wp_enqueue_script() puede provocar problemas de rendimiento, errores de caché y advertencias en herramientas de validación como Theme Check o PHPCS. En este artículo te explico cómo usar… Lee más: Como encolar javascript en WordPress

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.

ejemplo de mapa — Resultado del código arriba mencionado con dirección agregada.

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:

mapa con marcador — Resultado del código arriba mencionado

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.

The Digital Mike