Els mapes són un aspecte essencial de qualsevol lloc web d’empresa. Encara que estiguis completament basat en internet, els clients encara els agrada saber qui ets i on viviu. Google Maps és ara el valor predeterminat per a molts llocs web, ja que és el més fàcil d’utilitzar, pel que sembla el més precís i gratuït. Al final d'aquest tutorial, sabreu exactament com incrustar un Google Map responsiu al vostre lloc web.
Els mapes predeterminats de Google Maps no sempre tenen resposta i, per tant, no poden escalar-los a diferents mides de pantalla. En funció de si utilitzeu un complement de WordPress o si us el incorporeu usant codi, potser haureu d’afegir un parell de línies de CSS per respondre al mapa.
Disseny web sensible
Responsable és un terme clau aquí. Descriu el disseny web que té en compte l'experiència i el dispositiu de l'usuari per assegurar-se que sigui el mateix, independentment del dispositiu que utilitzeu per accedir al lloc web. Per exemple, un lloc web responsiu ha de proporcionar la mateixa qualitat de l’experiència si el visites a un escriptori, una tauleta o un smartphone.
Per fer-ho, el lloc web s’ha d’adaptar a diferents resolucions, mides de pantalla i tocs.
Incrustar un Google Map responsiu en un lloc web
Hi ha tres maneres que conec d’incrustar Google Maps en un lloc web. Si utilitzeu un tema de WordPress, pot ser que tingui la funció integrada. També podeu utilitzar un complement o podeu incorporar codi directament de Google a qualsevol lloc web. La primera i la segona opció són excel·lents per als usuaris de WordPress, altres CMS també fan servir complements perquè hi hagi cobertura. L’opció final, l’ús de codi, hauria de funcionar a la majoria de llocs web independentment de la forma en què es construeixen.
Utilitzeu un tema de WordPress per incorporar un Google Maps sensible
Alguns temes de WordPress tindran una funció específicament per a Google Maps. Com que els mapes són fonamentals per als llocs web moderns, alguns dissenyadors de temes els han implementat directament en els seus dissenys. Si el tema té una característica de mapa, és probable que necessiteu una API de Google Maps perquè funcioni. Afegiu l'API a les opcions del tema i us parlarà directament de Google per crear el mapa a cada visita.
- Visiteu aquesta pàgina al lloc web de Google per iniciar el procés de l'API.
- Seleccioneu el botó blau Iniciar.
- Seleccioneu la icona del menú de tres línies a la part superior esquerra de la nova pantalla.
- Seleccioneu les API i serveis i, després, les credencials.
- Seleccioneu Crea credencials i després Clau API.
- Seleccioneu Clau Restringir i seleccioneu referidors HTTP.
- Seleccioneu Desa.
- Copieu la clau d’API i enganxeu-la a la pàgina d’opcions de disseny que ho requereixi.
Un cop tingueu la clau API, podeu implementar Google Map al vostre lloc web mitjançant les eines de disseny de temes. Mentre el tema respongui, el mapa també ho ha de ser.
Utilitzeu un complement per incorporar un Google Map responsiu
WordPress utilitza complements, Joomla utilitza extensions, Drupal utilitza mòduls o complements i altres CMS utilitzen convencions de denominació similars. De qualsevol manera, els connectors es refereixen a elements modulars que podeu connectar al vostre CMS principal per afegir funcions. Una de les funcions útils és un Google Map. Si el tema del vostre lloc web no inclou un element de mapes i no voleu fer-ne el codi, el complement és el següent.
- A WordPress, navegueu a Complements i Afegeix un nou.
- Cerqueu Google Maps i seleccioneu un complement que us agradi.
- Habiliteu-lo dins dels complements i aneu a la configuració.
- Afegiu l'API de Google Maps que heu creat més amunt, on indiqueu i Deseu.
- Implementa el connector on vulguis que aparegui el mapa.
Altres CMS difereixen lleugerament pel que fa al seu nom i posició de menú, però el principi és el mateix. La majoria, si no tots, els complements de mapes requereixen que l’API de Google Maps funcioni.
Utilitzeu el codi per incrustar un Google Maps sensible
Si no utilitzeu WordPress o un altre CMS, podeu incloure un Google Maps sensible. Només cal que utilitzeu codi en lloc d’un mòdul. Es necessita una mica més de treball, però es lliuraran els mateixos mapes de resposta.
- Visiteu Google Maps i navegueu fins que el mapa que voleu visualitzar omple la pantalla.
- Seleccioneu l'enllaç Compartir blau i copieu el codi des del procés d'inserció.
- Afegiu el codi d'incrustació específic al codi següent entre i.
- Afegiu el codi a l’HTML de la vostra pàgina web on voleu veure el mapa.
- Desa els canvis
El codi:
Aquest no és el meu codi, el vaig trobar en línia, però el vaig provar al meu lloc web. Funciona com un encant i hauria de funcionar si utilitzeu un CMS, HTML, Hugo o un dels molts altres idiomes de pàgina web o eines de pàgina.
