2Fwebd

<?php

/**
 * Class Woffice_Members_Map
 *
 * This class handles the Members Map backend actions and callbacks.
 *
 * As well as the render part
 *
 */

2Fwebd

<?php 
/**
 * The private Google API key used for the GeoCoding API
 *
 * @var string
 */
private $privateApiKey = 'aaaaaaa';

/**
 * Woffice_Members_Map constructor.

2Fwebd

// Fetch the members positions
add_action('wp_ajax_wpffice_map_members', array($this, 'loadMembers'));
add_action('wp_ajax_nopriv_woffice_map_members', array($this, 'loadMembers'));

2Fwebd

<?php
/**
 * Load the BuddyPress members coordinates
 *
 * This is an Ajax callback, we just output the locations as a formatted JSON array
 *
 * @return void
 */
public function loadMembers() {
	$is_request_safe = (

2Fwebd

// Add our JS files
add_action('wp_enqueue_scripts', array($this, 'addScripts'));

2Fwebd

<?php
/**
 * Add the Vue.js library, the Google MAP API and our own component
 *
 * We are using a CDN for the library
 */
public function addScripts()
{
	// Vue.js library
	wp_enqueue_script(

2Fwebd

// Register our shortcode
add_shortcode( 'woffice_members_map', array($this, 'shortcode'));

2Fwebd

<?php 
/**
 * Register our [woffice_members_map] shortcode
 *
 * @return string
 */
public function shortcode()
{
  return '<div id="woffice-members-map__wrapper">
			<woffice-members-map :url="'. admin_url( 'admin-ajax.php' ) .'" :height="200"></woffice-members-map>

2Fwebd

(function() {
    Vue.component('woffice-members-map', {
        template: '<div id="woffice-members-map__content"></div>',
        props: ['url', 'height'],
        data: function () {
            return {
                loaded: false,
                members: []
            }
        },

2Fwebd

<?php 
/**
 * The public Google API key used for the Google Map API
 *
 * @var string
 */
private $publicApiKey = 'yyyyyyy';