Néhány nappal a GDPR határideje előtt még számtalan technikai kérdés van, amely megválaszolásra vár. Ezek közül az egyik gyakran előkerült kérdés a sütik kérdése. Mit szabad és mit nem szabad addig megjeleníteni, amíg nincs elfogadva a süti hozzájárulás?
Ha szigorúan vesszük az előírásokat, akkor elfogadás előtt egyetlenegy olyan süti sem hozható létre, amely valamilyen szintű azonosításra alkalmas, legyen az Google Analytics mérőkód, Google Maps vagy YouTube iframe beillesztése. Az engedékeny felfogás szerint, az Analytics-szel mi nem ismerhetünk meg személyes adatokat, illetve a harmadik fél általi iframe-ért nem felelünk.
Ebben a cikkben semmiképpen sem szeretnénk állást foglalni az előbbi kérdésben. Addig is, míg ez nem lesz teljesen letisztázva, érdemes megnézni, hogy miként jeleníthetünk meg Google térképet süti-mentesen?
Célunk, hogy mind kinézetben, mind működésben közel azonos eredményt kapjunk a Google Maps API segítségével. A megvalósítást egy önálló oldalban készítjük el, ugyanúgy, ahogy eredetileg. Így külön formázással nem kell foglalkoznunk. Továbbá a HTML oldalunkba illesztett iframe-nek ugyanúgy adjuk át a pozíciót.
Az eredeti url: https://maps.google.com/maps?q=Esztergom,+Lőrinc+u.+8.&ie=UTF8&output=embed
Az új süti-mentes url: https://www.domdom.hu/google/maps?q=Esztergom,+Lőrinc+u.+8.
Az ehhez használt forráskód a következőképpen néz ki: (A saját kulcs megadása után ez a kód módosítás nélkül használható)
<!DOCTYPE html>
<html><head><title>Google Maps</title>
<meta charset="utf-8">
<style type="text/css">html,body{width:100%;height:100%;margin:0;padding:0;}</style>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
<script>
var address = getParamter('q');
document.title = address + ' - ' + document.title;
function getParamter (name) {
var re = new RegExp('[?&]' + name.replace(/[\[\]]/g, '\\$&') + '(=([^&#]*)|&|#|$)'),
results = re.exec(document.location.href);
if (results && results[2]) {
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
}
function renderMap (center) {
var options = {
zoom: 17,
center: center,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.body, options);
var infowindow = new google.maps.InfoWindow({
content: address,
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: address
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
return map;
}
function initialize () {
var pattern1 = /^([0-9]+)°([0-9]+)'([0-9\.]+)"N ([0-9]+)°([0-9]+)'([0-9\.]+)"E$/;
if (pattern1.test(address)) {
var t = address.split(pattern1);
var lat = parseInt(t[1]) + (parseInt(t[2]) / 60) + (parseFloat(t[3]) / 3600);
var lng = parseInt(t[4]) + (parseInt(t[5]) / 60) + (parseFloat(t[6]) / 3600);
renderMap({lat: lat, lng: lng});
return;
}
var pattern2 = /^([0-9\.]+),? ([0-9\.]+)$/;
if (pattern2.test(address)) {
var t = address.split(pattern2);
renderMap({lat: parseFloat(t[1]), lng: parseFloat(t[2])});
return;
}
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function (results, status) {
if (status !== google.maps.GeocoderStatus.OK) {
document.body.innerHTML = 'Geocode was not successful for the following reason: ' + status;
return;
}
var map = renderMap(results[0].geometry.location);
if (results[0].geometry.bounds) {
map.fitBounds(results[0].geometry.bounds);
}
});
}
</script>
<script async defer src="https://maps.google.com/maps/api/js?key=YOUR_KEY&callback=initialize"></script>
</head>
<body></body>
</html>
A szükséges Google Maps API kulcsot az alábbi oldalról szerezhetjük be: https://developers.google.com/maps/documentation/javascript/get-api-key#standard-auth
Két engedélyre lesz szükségünk: Maps JavaScript API, Geocoding API
Így elértük azt, hogy megjeleníthetünk Google térképet anélkül, hogy bármilyen süti kerülne a felhasználónk böngészőjébe.
Utólagos kiegészítés: Sajnos ez a megoldás még nem mondható teljesnek, mert a Geocoding API ingyenes verziójának limitje naponta 2500 és másodpercenként 50 lekérés. Igaz kisebb, hobby honlapoknál ez teljesen elegendő lesz! Nagyobb oldalaknál meg szerver oldali cache segíthet ezen a problémán.