Streetview inladen in onze makelaar plugin die geschikt is voor Realworks

Wederom een kleine tip voor gebruikers van de WordPress plugin van Tussendoor. Zo af en toe krijgen we de vraag welke code exact gebruik dient te worden om Google Streetview in te laden, naast dat dit in de nieuwe handleiding terug te vinden is, delen we deze informatie natuurlijk graag met iedereen.

Code voor Streetview

De volgende code kun je gebruiken om Streetview te tonen bij gebruik van de WordPress plugin. Indien er gebruikt gemaakt wordt van het basis-thema, kun je met de volgende code Streetview tonen.

<div id="google-streetview"></div>

Wanneer dit niet het geval is, moeten er een aantal extra stappen worden uitgevoerd. Dit is onder andere wanneer je een maatwerk thema of aangekocht thema gaat gebruiken.

# Stap 1

Maak een javascript bestand aan waarin we de code voor de detail pagina kunnen plaatsen (single.js).

jQuery(function($) {
	'use strict';

	if (Wonen.map) {
		var map = new SingleMap({ data: Wonen.map });
		map.load();
	}
});

# Stap 2

Nu moeten we single.js gaan registreren in fuctions.php, met als dependencie googlemap.js (dit bestand kan je terugvinden in de js map van het basis thema).

add_action('init', function() {
wp_register_script('wonen-single', get_stylesheet_directory_uri().'/js/wonen/single.js', array('realworks-googlemap'), false, true);
});

# Stap 3

Nu gaan we er voor zorgen dat het net geregistreerde script opgehaald wordt op de detail pagina. Dit doen we met de volgende code.

<?php wp_enqueue_script('wonen-single') ?>

Nu kunnen we ook de latitude & longitude gegevens ophalen/inladen. Voeg de volgende code ook toe aan het template bestand van de detailpagina (zie handleiding).

<?php wp_localize_script('wonen-single', 'Wonen', array(
	'map' => $woning->map(),
)); ?>

Zodra je de code opslaat in de desbetreffende detail pagina en deze opnieuw inlaadt, zul je zien dat er een Google map (streetview) te zien is.

Gelukt?

Is alles gelukt? Top! Kom je er niet helemaal uit? Geen enkel probleem. Laat het ons dan weten via onze en we helpen je graag verder. Vermeld dan wel direct de inloggegevens voor zowel de WordPress admin, FTP en je licentiecode.