Com incrustar Google Maps amb la cartografia de l' Institut Cartogràfic de Catalunya (ICC) a la teva web.

El servei que dóna Google Maps és molt còmode d'utilitzar. És fàcil d'incrustar i de manipular però la cartografia base que mostra té molt per desitjar, en especial en zones rurals i de muntanya. Aquesta limitació, a Catalunya, es pot suplir posant la cartografia de l'Institut Cartogràfic de Catalunya com a capa al visor de Google Maps. La API de GM permet incorporar geoserveis Web Map Service (WMS) dins de la seva aplicació. En aquest article només explicaré els detalls del codi que s'ha de canviar per poder incrustar l'aplicació a la teva web. Al final d'aquest article hi ha els codis font complets. Copia'ls i guarda'ls en  arxius de text pla, amb el nom que vulguis però amb extensió *.htm (mapa.htm, TrobarCoordenades.htm).

Pots trobar un exemple d'això al bloc següent: http://barrancat.blogspot.com/

 

El primer que s'ha de fer és aconseguir una Google Maps API Key. És una clau que serveix per poder incrustar l'aplicació de GM a la teva web. És ràpida d'aconseguir i gratuïta (com a mínim per ara). Només has d'entrar al vincle anterior, posar-hi el teu lloc web o bloc i generar la clau de l'API. Al codi font dels dos arxius *.htm que has generat, a la tercera línia, s'ha de canviar la clau API que hi ha per la teva.

 

    <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=la clau API s'ha de posar aquí">script>

 

Edició de l'arxiu 'mapa.htm'

S'ha de buscar el tros de codi següent a dins de l'arxiu 'mapa.htm' i modificar-hi el que està marcat. En vermell, i respectivament, hi ha la longitud i la latitud (les coordenades que defineixen el punt central del mapa que es mostrarà), i el nivell de zoom (número enter de 0 -min- a 19 -max- ). Aquestes coordenades s'han de canviar. Per poder aconseguir les noves coordenades, s'haurà d'utilitzar l'arxiu 'TrobarCoordenades.htm' tal i com s'explica més endavant. El zoom es pot canviar segons les necessitats existents.

 

    // Configura el punt central del mapa

    var centrePoint = new GLatLng('41.84928850087535', '2.960536479949951');


    // Defineix el punt central i el nivell de zoom

    map.setCenter(centrePoint, 16);

 

Si no vols tenir el marcador (el punt vermell en el mapa), hauràs d'esborrar el tros de codi següent:

 

    // Afegeix un marcador arrossegable

    // Si no vols que ho sigui, posa {draggable: false}

    var marker = new GMarker(centrePoint, {draggable: false});

    map.addOverlay(marker); 

Finalment, si vols canviar la mida del mapa, has de canviar l'alçada (height) i l'amplada (width) del mapa. La unitat és el píxel.

    id="map" style="width:  640px;  height:  520px" 

Amb aquests paràmetres ja tindries l'aplicació preparada per incrustar a la web. Només et faltaria trobar les coordenades adequades per al nostre mapa. Has d'obrir l'arxiu 'TrobarCoordenades.htm' i moure el marcador fins al lloc escollit que vols que aparegui com a centre del mapa que vols incrustar. A sobre del mapa hi apareixeran les noves coordenades a mesura que vagis movent-te pel mapa. Copia-les i enganxa-les al codi de l'arxiu 'mapa.htm', i quan l'executis ja hauria d'aparèixer la nova localització.

 

 

 

Codi font 'mapa.htm'

--------------------------------------------------------------->

Codi font 'TrobarCoordenades.htm'

--------------------------------------------------------------->