# Saját Google Maps integráció készítése

> Hogyan blokkold, tölts be hozzájárulás után és láss el helyőrzővel egy egyedi Google Maps megoldást MU-pluginnal.

A Google Maps sokféleképp kerülhet az oldalra: térképbővítménnyel, a témába épített térképblokkal, oldalépítővel vagy kézzel beírt kóddal. A Complianz a legnépszerűbb megvalósításokhoz kész integrációt tartalmaz, ami blokkolja a térképet, és helyőrzőt tesz a helyére. Ha a tiéd nem tartozik ide, az alábbi módszerrel saját integrációt készíthetsz. Ehhez némi hibakeresés és egyedi kód kell.

A módszer akkor is jó, ha a meglévő integráció működik, de máshogy szeretnéd blokkolni, feloldani vagy helyőrzővel ellátni a térképet.

## A tipikus hiba: „Google is not defined”

Gyakori eset, hogy a böngésző konzolja függőségi hibát ír. A hiba a szkript blokkolását vagy a hozzájárulás utáni betöltését is érintheti. A példában a hozzájárulás utáni betöltés romlik el, és ez a hibaüzenet jelenik meg:

```text
Google is not defined
```

Ez azt jelenti, hogy egy fájl a Google Maps API-t keresi, de ezt a hívást a Complianz blokkolja. A fájl viszont függ az API-tól, ezért a térkép nem működik rendesen.

## A teendők

A saját integrációhoz három dolgot kell megoldani:

1. a hibát okozó fájl blokkolása, hogy hozzájárulás előtt ne fusson;
2. a fájlok helyes sorrendű betöltése hozzájárulás után;
3. helyőrző beállítása a térkép tárolóelemére.

Mindhárom lépés egyetlen MU-pluginben (a `/wp-content/mu-plugins/` mappába kerülő PHP-fájlban) megy. Ha a mappa nincs meg, hozd létre. A részleteket a [MU-pluginek és szűrők](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/fejlesztoknek-mu-plugin-es-szurok/) fejezet írja le.

### 1. A hibát okozó fájl blokkolása

A példában egy beágyazott jQuery-szkript, benne egy `mapOptions` nevű függvénnyel okozza a hibát. Ezt a függvénynevet teszed a blokkolólistára. A felelős szkript megkereséséhez nézd meg annak az oldalnak a forrását, ahol a térkép van, és keress olyan beágyazott szkriptet, amely hibát dobhat, ha a Google nem érhető el. Ilyen például az, amelyik fedőréteget, infóablakot vagy jelölőket ad a térképhez. A `mapOptions` más név is lehet: az egyedi térképeknél éppen ez a nehézség.

```php
<?php
/**
 * A szkript és a 'mapOptions' szöveget tartalmazó beágyazott szkript blokkolása.
 */
function cmplz_custom_googlemaps_script( $tags ) {
	$tags[] = array(
		'name'     => 'google-maps',
		'category' => 'marketing',
		'urls'     => array(
			'maps.googleapis.com/maps/api/js',
			'mapOptions',
		),
	);
	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );
```

### 2. Függőség megadása a hozzájárulás utáni betöltéshez

A `mapOptions` azért hibázik, mert szüksége van a betöltött Google API-ra. A megoldás egy függőség: az `enable_dependency` és a `dependency` tulajdonsággal megadod, hogy a `mapOptions` várjon a Google API-ra.

```php
<?php
function cmplz_custom_googlemaps_script( $tags ) {
	$tags[] = array(
		'name'              => 'google-maps',
		'category'          => 'marketing',
		'placeholder'       => 'google-maps',
		'urls'              => array(
			'maps.googleapis.com/maps/api/js',
			'mapOptions',
		),
		'enable_dependency' => '1',
		'dependency'        => [
			// 'amire-varni-kell' => 'ami-varakozik'
			'mapOptions' => 'maps.googleapis.com/maps/api/js',
		],
	);
	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );
```

### 3. Helyőrző a térkép tárolóelemére

A helyőrzőhöz egy CSS-osztály kell, amelyre a Complianz a képet teheti. Két lehetőséged van:

- a térkép tárolóelemének meglévő CSS-osztályát használod;
- saját CSS-osztályt adsz a térkép tárolóelemének.

A meglévő osztályt úgy találod meg, hogy a térképen jobb gombbal a böngésző elemvizsgálóját nyitod meg, és megnézed az elem `class` értékét.

A helyőrzőhöz két tulajdonságot adsz az előző kódhoz: az `enable_placeholder` értéke `1`, a `placeholder_class` pedig a talált osztály (a példában `wpb_wrapper`).

```php
<?php
function cmplz_custom_googlemaps_script( $tags ) {
	$tags[] = array(
		'name'               => 'google-maps',
		'category'           => 'marketing',
		'placeholder'        => 'google-maps',
		'urls'               => array(
			'maps.googleapis.com/maps/api/js',
			'mapOptions',
		),
		'enable_placeholder' => '1',
		'placeholder_class'  => 'wpb_wrapper',
		'enable_dependency'  => '1',
		'dependency'         => [
			'mapOptions' => 'maps.googleapis.com/maps/api/js',
		],
	);
	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );
```

### 4. A load esemény újraindítása (nem mindig kell)

Ha a térkép szkriptje a dokumentum betöltésekor (`load` vagy `ready`) inicializálja magát, hozzájárulás után a térkép nem indul el, mert ez az esemény addigra már lefutott. Ilyenkor a `cmplz_run_after_all_scripts` esemény után újra elsüthető a `load` esemény. Add ezt az integrációdhoz:

```php
<?php
/**
 * A load esemény újraindítása hozzájárulás után.
 * Nem mindig szükséges: csak akkor kell, ha a térkép a dokumentum betöltésekor indul.
 */
function cmplz_custom_maps_initDomContentLoaded() {
	ob_start();
	?>
	<script>
		document.addEventListener("cmplz_run_after_all_scripts", cmplz_fire_domContentLoadedEvent);
		function cmplz_fire_domContentLoadedEvent() {
			dispatchEvent(new Event('load'));
		}
	</script>
	<?php
	$script = ob_get_clean();
	$script = str_replace( array( '<script>', '</script>' ), '', $script );
	wp_add_inline_script( 'cmplz-cookiebanner', $script );
}
add_action( 'wp_enqueue_scripts', 'cmplz_custom_maps_initDomContentLoaded', PHP_INT_MAX );
```

## A teljes MU-plugin

A négy lépés együtt egyetlen fájl: a blokkolás, a függőség és a helyőrző egy `cmplz_known_script_tags` szűrőben, alatta az opcionális esemény-újraindítás. Mentsd például `cmplz-custom-googlemaps.php` néven, és töltsd fel a `/wp-content/mu-plugins/` mappába.

```php
<?php
function cmplz_custom_googlemaps_script( $tags ) {
	$tags[] = array(
		'name'               => 'google-maps',
		'category'           => 'marketing',
		'urls'               => array(
			'maps.googleapis.com/maps/api/js',
			'mapOptions',
		),
		'enable_placeholder' => '1',
		'placeholder_class'  => 'wpb_wrapper',
		'enable_dependency'  => '1',
		'dependency'         => [
			'mapOptions' => 'maps.googleapis.com/maps/api/js',
		],
	);
	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_custom_googlemaps_script' );

function cmplz_custom_maps_initDomContentLoaded() {
	ob_start();
	?>
	<script>
		document.addEventListener("cmplz_run_after_all_scripts", cmplz_fire_domContentLoadedEvent);
		function cmplz_fire_domContentLoadedEvent() {
			dispatchEvent(new Event('load'));
		}
	</script>
	<?php
	$script = ob_get_clean();
	$script = str_replace( array( '<script>', '</script>' ), '', $script );
	wp_add_inline_script( 'cmplz-cookiebanner', $script );
}
add_action( 'wp_enqueue_scripts', 'cmplz_custom_maps_initDomContentLoaded', PHP_INT_MAX );
```

A tulajdonságok jelentése és a teljes integrációs API a [Integráció fejlesztése harmadik feleknek](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/fejlesztoknek-integracio-fejlesztes/) fejezetben van. A kész, konkrét térképmegoldásokhoz (WoodMart, Leaflet és mások) a [Térkép- és témaintegrációk MU-pluginnal](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/blokkolas-helyorzok-terkep-integraciok/) fejezet ad MU-plugineket.