Divendres, 22 de Novembre de 2013

Posicionar Marcadors en Google Maps

Aprofitant les funcions avançades de Google Maps

Incrustar un mapa de Google Maps en una web és molt senzill, no obstant això més complicat pot resultar mostrar diversos marcadors personalitzats en el mateix mapa; veurem a continuació com aconseguir-ho.

D'entrada necessitarem utilitzar una API de Google la qual ens demanarà una clau, per obtenir-la us recomano aquest concís tutorial del propi Google

Ara imaginem, per posar un exemple concret, que volem ensenyar un mapa de Barcelona amb assenyalats alguns llocs com: la Sagrada Família, Plaça Catalunya i l'Estació de Sants. Per trobar les seves coordenades podeu utilitzar els serveis d'aquesta web: geo-tag.de

I aquest és el codi necessari:

<div id="capa-mapa" style="width:400px;height:400px"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=LA-VOSTRA-CLAU-API&sensor=false"></script>
<script type="text/javascript">
// crearem un array amb la informació de tots els punts:
// el seu nom, latitud, longitud,
// la icona que li vulguem assignar (veure més endavant)
// i un html totalment personalitzable al vostre gust, incloent imatges i enllaços
var misPuntos = [
    ["Sagrada Familia", "41.403571", "2.174472", "icon1", "<div>html</div>"],
    ["Plaça Catalunya", "41.387097", "2.170072", "icon2", "<div>html</div>"],
    ["Estación de Sants", "41.379514", "2.140644", "icon3", "<div>html</div>"],
];

function inicializaGoogleMaps() {
    // Coordenades del centre del nostre requadre principal
    var x =41.389624;
    var y = 2.15988563537;
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(x, y),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("capa-mapa"), mapOptions);
    setGoogleMarkers(map, misPuntos);
}

var markers = Array();
var infowindowActivo = false;
function setGoogleMarkers(map, locations) {
    // Definim les icones a utilitzar amb les seves mesures
    var icon1 = new google.maps.MarkerImage(
        "https://www.vinx.info/uploads/editor/map-green.png",
        new google.maps.Size(20, 30)
    );
    var icon2 = new google.maps.MarkerImage(
        "https://www.vinx.info/uploads/editor/map-orange.png",
        new google.maps.Size(20, 30)
    );
    var icon3 = new google.maps.MarkerImage(
        "https://www.vinx.info/uploads/editor/map-red.png",
        new google.maps.Size(20, 30)
    );

    for(var i=0; i<locations.length; i++) {
        var elPunto = locations[i];
        var myLatLng = new google.maps.LatLng(elPunto[1], elPunto[2]);

        markers[i]=new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: eval(elPunto[3]),
            title: elPunto[0]
        });
        markers[i].infoWindow=new google.maps.InfoWindow({
            content: elPunto[4]
        });
        google.maps.event.addListener(markers[i], 'click', function(){      
            if(infowindowActivo)
                infowindowActivo.close();
            infowindowActivo = this.infoWindow;
            infowindowActivo.open(map, this);
        });
    }
}

inicializaGoogleMaps();
</script>

Exemple real del mateix codi:

« Veure tots els articles