Google Maps görgetés

A Google egyik igen ismert alkalmazásáról lesz szó, a Google Maps-ről. A Google térképeit 2 módon ágyazhatjuk a weboldalunkba.

1.) Iframe segítségével

Ezt a beágyazási lehetőséget ajánlja fel nekünk a Google a térképes keresést követően.

2.) Beágyazzuk a Google Maps alkalmazást.

Ebben az esetben egy JavaScript kód segítségével a legaprólékosabb beállításokat is megtehetjük, kezdve a színek beállításától, az útvonaltervezőig és még nagyon sok hasznos lehetőséggel.

A beágyazásra több lehetőségünk is van. Használhatjuk a Google által megadott forrásokat:
Google Maps

Vagy az alábbi két JavaScript alkalmazással:
Gmap3
Gmaps.js

A probléma azzal van, hogy ha a térképünk mérete elég széles ahhoz, hogy az oldalon való lefele, illetve felfele görgetéskor az egérmutatónk a térkép fölé kerüljön, akkor megállítja a weboldal görgetését és elkezd a böngésző a térképen nagyítani, illetve kicsinyíteni. Ez a jelenség roppant bosszantó tud lenni, amikor teljes képernyő szélességben alkalmazunk ilyen térképet, pedig a modern stílusirányzatok széles körben alkalmazzák ezt a megjelenítési módot.

Megoldás az iframe változatra

A megoldás a problémára az, hogy a térkép fölé emelünk egy átlátszó réteget, ami megakadályozza, hogy görgetéskor a böngésző a térképen használja a méretezést. Ennek az lenne a hátulütője, hogy ebben az esetben a térképre nem lehet kattintani. Éppen ezért JavaScript segítségével, ha rákattintunk erre az átlátszó rétegre, azzal eltűntetjük azt és ezt követően már tudjuk nagyítani, kicsinyíteni, vagy akár mozgatni a térképet. Annak érdekében, hogy ez a funkció újra alkalmazható lehessen, amikor az egerünket elhúzzuk a térkép fölül, vissza kell állítanunk az előbb eltűntetett áttetsző rétegünket.

Létre kell hoznunk egy tárolót, aminek a helyzetét relatívra állítjuk CSS segítségével. Erre azért van szükség, mert egy ha egy relatív helyzetű tárolóba egy abszolút helyzetű elemet teszünk, akkor annak a pozícióját a tárolón belül leszünk képesek beállítani. Egyéb esetben a tárolón kívül helyezné el az abszolút helyzetű elemet.

Az említett tárolón belül el kell helyeznünk egy újabb tárolót, ami a kitakarást fogja végezni. Ennek az elemnek a helyzetét pedig abszolútra állítjuk, továbbá megadjuk az őt tároló elem bal felső sarkától induljon ki és a tároló teljes területét töltse ki. Továbbá azt, hogy ez a réteg mindenféleképpen az iframe fölött helyezkedjen el, ezt a z-index-el tudjuk beállítani.

Majd magát az iframet is beágyazzuk a számunkra megfelelő térkép elérésével.

Legvégül JavaScript segítségével megoldjuk, hogy a rétegre való kattintáskor a réteg eltűnjön, majd ha a kurzor elhalad a térkép fölül, akkor a réteg újra aktívvá váljon.

CSS

#mapWrap {
	position: relative;
}

#mapLayer {
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: inline-block;
}

HTML

<div id="mapWrap">
	<div id="mapLayer"></div>
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2693.6322618599006!2d19.070590999999997!3d47.536021999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741dbea0f70bd57%3A0xaa7f29b9cbfce909!2sRUANDER+Oktat%C3%A1si+Kft.!5e0!3m2!1shu!2shu!4v1430291724137" width="710" height="365"></iframe>
</div>

JavaScript

<script type="text/javascript">
$(document).ready(function() {
	$('#mapLayer').on('click', function() {
		$('#mapLayer').hide();
	});
	$('#mapWrap').mouseleave(function() {
		$('#mapLayer').show();
	});
});
</script>

Megoldás a beágyazott Google Maps változatra

Az előző változathoz képest lényegesen egyszerűbb dolgunk van, hiszen csak az alábbi kódrészletet kell beágyaznunk, ahol a Google Maps alkalmazást inicializáljuk.

JavaScript

var mapProp = {
	scrollwheel: false
}

Természetesen ezt a megoldást akár az előző példa mintájára tovább is lehet fejleszteni.

JavaScript

<script type="text/javascript">
$(document).ready(function() {
	$('#mapLayer').on('click', function() {
		map.setOptions({ scrollwheel: true});
	});
	$('#mapWrap').mouseleave(function() {
		map.setOptions({ scrollwheel: false});
	});
});
</script>

Demo letöltése

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.