Te encargan una web y, tras hacer el correspondiente cutup y dejarla más o menos molona, toca una de las partes más complicadas y más “robatiempo” del proceso, hacer un mapa dignamente completo.
Aquí os pondré un ejemplo de código para un mapa que cumple con los siguientes requisitos:
- Iconos de lugar personalizados para cada resultado de búsqueda.
- Iconos de alta definición para pantallas con alto DPI.
- Minimización de código dentro del documento HTML.
- Posición inicial por defecto con su propio nivel de zoom.
- Posición inicial por geoposición y con su propio nivel de zoom.
- Posibilidad de ir, centrar, hacer zoom y abrir ventana de información en un punto desde fuera del mapa.
- Color del mapa personalizado.
- Permitir zoom en mapa solo con los botones de la interfaz, bloquear scroll con ratón.
Pues bien, entramos en vereda. Lo primero que deberemos hacer es crear un archivo llamado “js/map.js“, siempre y cuando no tengamos ya creado un “js/functions.js” o algo así.
Dentro del archivo “js/map.js” introducimos lo siguiente:
var map,
geoLocPos,
defPos = new google.maps.LatLng(-21.6437454, 143.327403),
locZoom = 10, // zoom por defecto para la geolocalización
siteZoom = 14, // zoom por defecto para cada punto
defZoom = 5, // zoom por defecto para la vista inicial
icPath = 'img/markers/pin', // ruta y primeras 3 letras de nuestro pin
icSize = new google.maps.Size(42, 54), // tamaño para mostrar el pin
icExt = '.png', // extensión del pin
icLoc = new google.maps.MarkerImage(icPath + 'Loc' + icExt, null, null, null, icSize), // icono por defecto para la posición geolocalizada
ic1 = new google.maps.MarkerImage(icPath + '1' + icExt, null, null, null, icSize), // icono por defecto para la posición 1
ic2 = new google.maps.MarkerImage(icPath + '2' + icExt, null, null, null, icSize); // icono por defecto para la posición 2
function initialize () {
// pedimos la posición al navegador
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var posLoc = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
mapOptions = {
center: posLoc
},
geoLocPos = new google.maps.Marker({
position: posLoc,
map: map,
icon: icLoc,
optimised: false
});
map.setCenter(posLoc);
map.setZoom(locZoom);
});
}
var mapOptions = {
center: defPos,
zoom: defZoom,
scrollwheel: false
},
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions),
styles = [
{
stylers: [
{hue: "#787487"}, // con esto aplicamos un tono violeta al mapa
{saturation: -66}
]
}
];
map.setOptions({styles: styles});
// cargamos la función que contiene los puntos y le pasamos la variable "map"
loadLinks(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Ahora deberemos colocar el siguiente código antes del elemento </head> en nuestro documento HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="js/map.js"></script>
Y dentro del cuerpo del documento, entre los elementos <body> y </body>, colocaremos el siguiente código:
<!-- contenedor donde se generará el mapa -->
<div id="map-canvas"></div>
Con esto, habiendo creado la imagen del pin básico con la ruta “img/markers/pinLoc.png” ya tendremos el mapa funcionando centrado en una posición por defecto (en este caso el estado de Queensland, Australia) y, si damos permiso al navegador de adquirir nuestra posición, tendremos un marcador personalizado geoposicionado con nuestra ubicación actual.
Ahora viene la segunda parte del post, donde colocaremos diferentes puntos en el mapa, cada uno con su icono. Para ello os voy a poner código con 2 puntos, pero siguiendo la lógica del proceso podréis poner los que queráis. El siguiente código deberá ir dentro del documento HTML, ya que es un contenido que puede ser generado de forma dinámica al cargar la página a través de un bucle PHP, por ejemplo, con un CMS tipo WordPress.
function loadLinks(map) {
// COMIENZO DEL BUCLE
// cargar posición 1
var pos1 = new google.maps.LatLng(-16.9198523, 145.779889),
site1 = new google.maps.Marker({
position: pos1,
map: map,
icon: ic1,
optimised: false
}),
infosite1 = new google.maps.InfoWindow({content: 'este es el contenido de la ventana para el sitio 1'});
google.maps.event.addListener(site1, 'click', function () {
infosite1.open(map, site1);
map.setCenter(pos1);
});
// Listener para abrir la infoWindow
$("#site1").click(function () {
infosite1.open(map, site1);
map.setCenter(pos1);
map.setZoom(siteZoom);
});
// cargar posición 2
var pos2 = new google.maps.LatLng(-10.9198523, 135.779889),
site2 = new google.maps.Marker({
position: pos2,
map: map,
icon: ic2,
optimised: false
}),
infosite2 = new google.maps.InfoWindow({content: 'este es el contenido de la ventana para el sitio 2'});
google.maps.event.addListener(site2, 'click', function () {
infosite2.open(map, site2);
map.setCenter(pos2);
});
// Listener para abrir la InfoWindow
$("#site2").click(function () {
infosite2.open(map, site2);
map.setCenter(pos2);
map.setZoom(siteZoom);
});
// LOOP END
}
Como puedes ver, he creado un script con un contenido totalmente dinamizable, en el que tenemos 2 lugares diferenciados con la terminación 1 ó 2, pero que podrá llegar hasta el número que quieras, y a cada número le corresponde un icono en la carpeta “img/markers/“.
Como también podrás observar, he añadido un Event Listener al final de cada bucle escuchando el evento “click” en un elemento externo al mapa. Para el caso del primer punto del mapa, “site1“, al hacer click en un elemento externo con el ID “#site1” irá, centrará, hará zoom y abrirá la ventana de información de ese punto.
Bueno, espero que os haya gustado esta solución, sé que el código es mejorable, pero creo que es lo suficientemente robusto y escalable como para usarlo en webs profesionales. Un saludo!