Crear un mapa utilitzant les APi’s versió 3 de Google

Aquests dies he tingut la oportunitat d’entrar a fons amb la programació de  les API’s de Google versió 3 per poder incorporar i crear mapes en les nostres pàgines web.

Les noves API’s estant pensades per poder treballar amb les noves funcionalitats del HTML5, com per exemple la geolocalització.

Per inserir un mapa dins de la vostra pàgines no es necessari utilitzar programació, simplement amb les opcions del Google Maps us podeu beneficiar de la possibilitat tenir un mapa amb la situació del vostre negoció o per assenyalar un punt d’interès de la vostra ciutat.

Realment les API’s estant pensades per els desenvolupadors puguem crear noves aplicacions amb funcionalitats específiques com per exemple marcar múltiples punts en un mapa a partir de la informació d’una base dades, o bé controlar els events per poder donar més interacció en els nostres mapes.

A continuació us detallo una petita funció que us permet crear un mapa a partir d’una posició de longitud i latitud

El primer que heu de fer, dins del <head> de la vostra pàgina es inserir el següent fragment d’script :

Google Maps

A continuació s’ha de crear una capa dins del <body> per poder incloure el mapa. La capa l’heu de situar on voleu fer aparèixer el mapa. En l’exemple següent farem que la nostra capa tingui una mida de 450 per 300.

<div id=”mapa” style=”width:450px; height:300px“></div>

Ja per finalitzar només caldrà fer la crida a la funció de creació del mapa. Aquesta funció anomenada crearMapa té 4 paràmetres : nom del capa div on volem el mapa, nivell de zoom, latitud i longitud. Si voleu poder afegir l’event onLoad en el <body> de la vostra pàgines per poder executar el script.

<body onLoad=”crearMapa(‘mapa’,6,41.15,2.14);“>