Skip to main content

Cum adaug o hartă Google Maps în WordPress fără plugin

Problema vine de la mesajul de eroare Google Maps “this page didn’t load google maps correctly” sau “Pagina nu poate încărca corect Google Maps”. L-am întâlnit pe multe site-uri.

Am avut și eu această problemă pe câteva site-uri. Nu am studiat problema și am preferat să șterg harta.

Astăzi a trebuit, la cererea unui client, să pun o hartă Google la pagina de contact prin urmare trebuia în sfârșit să caut o soluție la problemă.

Am instalat vreo trei plugin-uri, care nu au funcționat, deși am generat și API Key. Se pare că trebuie plătit ceva la Google ca acest API Key să funcționeze sau nu am avut eu răbdare să-l configurez.

Mă rog am cătat o soluție mai rapidă și viabilă.

Pași inserare hartă Google în WordPress

 1. Alegere locație

Eu am ales parcul de la mine din oraș.

2. Postați locația

Apăsăm ultimul buton din dreapta “Postați locația” și alegem tabul “Încorporați o hartă”.

3. Încorporare hartă

Apăsăm buronul “Copiați codul HTML”.

La mine arată cam așa:

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe>

Textul de mai sus se introduce în articol/pagină dar în varianta de vizualizare text.

Dacă ai urmat corect toți pașii ar trebui să vezi harta ca mai jos.

Cum facem harta responsive?

Mai am o problemă însă. Harta are dimensiunea fixă de 650×450 pixeli după cum rezultă din codul ei, prin urmare va ieși din ecran la dispozitivele mai mici, mai ales la telefoane.

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe>

Orice modificare ai face acolo harta nu va fi responsive.

Soluția este în doi pași:

1. Adăugăm codul HTML <div> </div>

<div><iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe></div>

2. Adăugăm câteva liniile de cod CSS în fișierul unde se regăsește stilul temei tale

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Chestia asta se face în două feluri:

a) Intrăm în menu-ul Aspect>Personalizare>CSS suplimentar din dashboardul WordPress. Mai toate temele au această opțiune. Adăugăm aici liniile de cod CSS de mai sus.

b) Intrăm în menu-ul Aspect>Editor Teme in dashboard WordPress. Adăugăm aceeași secținune de cod CSS în fișierul style.css. Nu uitați să salvați în ambele cazuri.

Harta va trebui să arate ca în pagina de contact a siteului la care lucrez acum. Verificați voi pe diverse dispozitive și veți vedea că este responsive.

În Google Chrome puteți verifica și cu click dreapta mouse + Inspect element.

Dacă toate astea ți se par complicate poți oricând să apelezi la serviciile mele.

Resurse folosite

Youtube

Blog

https://www.ostraining.com/blog/coding/responsive-google-maps/

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.