Cuando ponemos un mapa en nuestra web normalmente solo necesitamos un punto a mostrar, pero  si queremos mostrar también los aparcamientos metro y buses que podemos hacer.

Hoy os voy a explicar como poner un mapa personalizado  con todos estos extras.

Para empezar iniciamos las variables que vamos a utilizar, después creamos la función initialize() la que se encarga iniciar nuestro mapa de Google teniendo ya creada esta función  definimos los parámetros del mapa.

Creamos la función setMarkers() que se va a encargar de crear y colocar los marcadores del mapa que tenemos definidos en las variables del principio.

Creamos la función viev() que se va a encargar de mostrar o ocultar nuestros marcadores según el valor que le pasemos.

Para terminar llamamos al initialize() para crear el mapa con: google.maps.event.addDomListener(window, ‘load’, initialize);

Aquí les dejo el código entero comentado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 // JavaScript Document
Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] == obj) {
            return true;
        }
    }
    return false;
}
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
        "use strict";
        if (this == null) {
            throw new TypeError();
        }
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) {
            return -1;
        }
        var n = 0;
        if (arguments.length > 1) {
            n = Number(arguments[1]);
            if (n != n) { // para verificar si es NaN
                n = 0;
            } else if (n != 0 && n != Infinity && n != -Infinity) {
                n = (n > 0 || -1) * Math.floor(Math.abs(n));
            }
        }
        if (n >= len) {
            return -1;
        }
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) {
            if (k in t && t[k] === searchElement) {
                return k;
            }
        }
        return -1;
    }
}	
//----------------------------------------------------------------------------	
var alls=['Parking','Bus','Metro','establecimiento']; // todos los tipos de markers que hay
var marcadoress=[];
var visibles = ['establecimiento','Parking','Bus','Metro']; //los tipos de markers que son visibles
var infowindows=[[]]; // variable almacenamiento infobox
infowindows.splice(0,infowindows.length) // nos aseguramos que la variable este vacia
 
 
//datos para contenidos de infobox
var point_content=[
		['Estacion de Bus','Villarroel - Gran Via'],
		['Estacion de Bus','Gran Via - Villarroel'],
		['Estacion de Bus','Comte d\'Urgell - Arago'],
		['Estacion de Bus','Villarroel-Arago'],
 
		['Estacion de Metro','Urgell'],
		['Estacion de Metro','Universitat'],
 
		['Parking Villaoroel',' 2,30€/h'],
		['Parking GRAN CADI',' 2,40€/h'],
	] 
 
//funcion generacion de infobox
var contenido= function(e){
	return '
<div id="hook">
'+ '
<div id="siteNotice">'+ '</div>
'+ ''+ '<span class="header_map" style="text-align: center;">'+point_content[e][0]+'</span>'+ '
<div id="bodyContent" style="text-align: center;">'+ ''+point_content[e][1]+''+ '</div>
'+ '
</div>
' } //configuracion general del mapa var configuracion={ 'zoom':16, 'position_ini_o':41.384543, 'position_ini_a':2.157820, 'id_contenedor':'mapa_div', //datos para definir el contenido de los infobox 'contentString_establecimiento':'
<div id="hook">
'+ '
<div id="siteNotice">'+ '</div>
'+ ''+ '<span class="header_map">La cuchara del norte</span>'+ '
<div id="bodyContent">'+ 'Tel: <a style="color: #000;" href="tel:+34934527862"> 934 527 862</a> '+ 'Email: <a style="color: #000;" href="mailto:info@lacucharadelnorte.es"> info@lacucharadelnorte.es</a> '+ '.'+ '</div>
'+ '
</div>
' } // Definir los iconos var icon_establecimiento = { url: '/map/lacu.png', size: new google.maps.Size(44, 65), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(22, 65) }; var icon_metro = { url: '/map/underground.png', size: new google.maps.Size(29, 44), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(14, 44) }; var icon_bus = { url: '/map/bus.png', size: new google.maps.Size(32, 37), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(16, 30) }; var icon_parking = { url: '/map/parking.png', size: new google.maps.Size(32, 37), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(16, 30) }; // definir posiciones de los puntos var beaches = [ ['Academia', 41.384543, 2.157820, 10, icon_establecimiento, configuracion['contentString_establecimiento'],'establecimiento'], //posiciones de paradas de autobus ['Bus', 41.383348, 2.159235, 5, icon_bus, contenido(0),'Bus'], ['Bus', 41.382800, 2.159052, 5, icon_bus, contenido(1),'Bus'], ['Bus', 41.384341, 2.155884, 5, icon_bus, contenido(2),'Bus'], ['Bus', 41.385343, 2.156523, 5, icon_bus, contenido(3),'Bus'], //Posiciones de metro ['Metro', 41.382499, 2.158881, 4, icon_metro, contenido(4),'Metro'], ['Metro', 41.385600, 2.164057, 4, icon_metro, contenido(5),'Metro'], ['Parking', 41.383572, 2.159129, 7, icon_parking, contenido(6),'Parking'], ['Parking', 41.384592, 2.159154, 7, icon_parking, contenido(7),'Parking'], ]; // Inicia la creacion del mapa function initialize() { var mapOptions = { zoom: configuracion['zoom'], panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, center: new google.maps.LatLng(configuracion['position_ini_o'], configuracion['position_ini_a']), // Estilos se pueden quitar y el mapa queda por defecto (mas estilosen https://snazzymaps.com/explore?page=2); styles: [ { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#aabcc4" }, { "visibility": "on" } ] } ] //Estilos hasta aqui } var map = new google.maps.Map(document.getElementById(configuracion['id_contenedor']),mapOptions); setMarkers(map, beaches); animation: google.maps.Animation.DROP } // Inicia los marcadores function setMarkers(map, locations) { // Recorre y coloca los marcadores for (var i = 0; i &lt; locations.length; i++) { var beach = locations[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: beach[4], tipo: beach[6], title: beach[0], zIndex: beach[3], animation: google.maps.Animation.DROP }); marcadoress.push(marker); var content = beach[5] var infowindow = new google.maps.InfoWindow() // Muesta el infobox al hacer click google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ return function() { infowindow.setContent(content); infowindow.open(map,marker); var l = $('#hook').parent().parent().parent().siblings(); for (var i = 0; i &lt; l.length; i++) { if($(l[i]).css('z-index') == 'auto') { $(l[i]).children('div').css('border-radius', '16px 16px 16px 16px'); $(l[i]).children('div').css('border', 'px solid #000'); $(l[i]).children('div').css('background', '#fff'); } } // Solucion x para almacenar y despues ocultar los infobox // Administrar la lista de los tipos de marcador ocultos y visibles function viev(e){ if(e=="All"){ for (var i = 0, length = alls.length; i &lt; length; i++) { if(!visibles.contains(alls[i])){ visibles.push(alls[i]) } ocultar_marcadores(); } visibles.push(e) }else{ if(visibles.contains(e)){ visibles.splice(visibles.indexOf(e),1); ocultar_marcadores(); }else{ visibles.push(e) ocultar_marcadores(); } } } // oculta muestra los marcadores (depende de la funcion viev()) var ocultar_marcadores = function() { //recorre los marcadores for (var i = 0, length = marcadoress.length; i &lt; length; i++) { if(visibles.contains(marcadoress[i].tipo)){ marcadoress[i].setVisible(true); } else { marcadoress[i].setVisible(false); } } // recorre los infobox for ( var i=0, length = infowindows.length; i &lt; length; i++){ infowindows[i][0].close(infowindows[i][0],infowindows[i][1]) } infowindows.splice(0,infowindows.length) }; // evento que esta a la escucha para lanzar el inicio de la creacion. google.maps.event.addDomListener(window, 'load', initialize);