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/
____________________________________________________