Freebies
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.