weboldal készítés, Nagy-Webdesign

Weboldal készítés

Ügyfélorientáltság

Egyedi megoldások

Kedvező ár

Trend követés

Reszponzív felület

Használhatóság

Látványos megjelenés

Wordpress és a reszponzív Google Maps

Ma már elvárás a reszponzív honlap, a Google kereső is díjazza ezt a találati listában az oldal előrébb sorolásával. Ehhez minden bővítménynek teljesítenie kell ezt az elvárást. (Weboldal készítés esetén ezt mindig tartsuk szem előtt, hiszen a látogató is felfigyel a weboldal hibáira!) Google térképpel kapcsolatos bővítményből számtalan található, rengeteg fejlesztő foglalkozik ilyen plugin készítéssel, de nehéz megfelelőt találni. Néha viszont nem is feltétlenül van szükség felesleges telepítésekre, mivel a Google fejlesztői oldala segítséget nyújt számunkra. Szerencsére a Google mindenre odafigyelt, hiszen nem csak reszponzív megoldást kínál, hanem még a weboldalba ágyazott CSS szabályokat is el lehet kerülni. Mindösszesen egy rövid kódrészt kell a weboldalba illeszteni és egy rövid szabályt a style.css fájlba.

Elsőnek lássuk a kódrészt.

<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initmap">
</script>
<script type="text/javascript">
function initmap() {
  var mapOptions = {
  zoom: 15,
  center: new google.maps.LatLng(47.507116, 19.042984),
  mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 map = new google.maps.Map(document.getElementById('map'), mapOptions);
 var marker = new google.maps.Marker({
    position: new google.maps.LatLng(47.507116, 19.042984),
    map: map,
    });
}
</script>

Elsőnek szeretném megjegyezni, hogy ezt a kódrészt csak úgy szabad beilleszteni az oldalba, hogy ne legyen a sorok közt üres sor, mivel a Wordpress automatikusan kiegészíti olyan HTML tagokkal amitől működésképtelen lesz a kódrész!

Az első sor gondoskodik a térkép megjelenésének szabályairól, melyet kicsit később részletezek. Az utána következő szkript pedig a megjelenő térkép tartalmáért felelős. Megadható a nagyítás, műholdas kép nézet, jelölő elhelyezése és még sok más. A minta szkriptben három fontos rész van számunkra. Az első a nagyítás mértéke, zoom: 15. A második a térkép közepének koordinátái. Valamint a harmadik, a jelölő helyének koordinátái. Ez egy alap térkép, ami nagy általánosságban megfelelő egy kapcsolatok menüpont számára.

Ezek után lássuk a CSS fájlban elhelyezendő szabályokat.

#map {
width: 450px; height:350px;
}
@media screen and (max-width: 500px) {
#map {
    margin-left: 10%;width: 80%; height: 300px
    }
}

Mint látszik, a szabály két részre van bontva. Az 500 pixel felbontásnál nagyobb és az annál kisebb felbontású megjelenítőkre. Ha például számítógépről nézi a látogató a weblapot, akkor 450x350-es méretben jelenik meg a térkép. Viszont egy kisebb felbontású mobil eszköz esetén a teljes szélesség 80%-át fogja a térkép lefedni, magassága pedig csak 300 pixel lesz. Az itt közzé tett szkriptben egyedül a koordinátákat kell átírni és máris használható. A koordináták beszerzése a Google térképpen könnyedén megoldható, a térkép számunkra megfelelő pontjára kattintva az ablak alsó részén megjelenik a koordináta.

Az oldal használatával hozzájárul a cookie-k használatához és az adatkezelési szabályzathoz.