Skip to content
Permalink
Browse files

Added script to render the map in the frontend

  • Loading branch information...
David Aguilera
David Aguilera committed Feb 28, 2019
1 parent b892411 commit 9bd9c8234b68a4c6a8d6e3c0f16fcda69fda8835
Showing with 123 additions and 5 deletions.
  1. +72 −0 assets/src/js/public/public.js
  2. +39 −5 nelio-maps.php
  3. +12 −0 webpack.config.js
@@ -0,0 +1,72 @@
const {
LatLng,
Marker,
Map,
} = window.google.maps;

function init() {

[ ...document.querySelectorAll( '.nelio-maps-google-map-wrapper:not( .nelio-maps-ready )' ) ].map( el => initGoogleMap( el ) );

}//end init()

function initGoogleMap( el ) {

el.classList.add( 'nelio-maps-ready' );

const marker = extractMarkerPositionIfAny( el );
const map = new Map( el, extractMapOptions( el ) );

if ( marker ) {
new Marker( { map, clickable: false, position: new LatLng( marker.lat, marker.lng ) } );
}//end if

}//end initGoogleMap()

function extractMapOptions( el ) {

const lat = parseFloat( el.getAttribute( 'data-lat' ) );
const lng = parseFloat( el.getAttribute( 'data-lng' ) );

const isDraggable = 'true' === el.getAttribute( 'data-is-draggable' );
const showZoomButtons = 'true' === el.getAttribute( 'data-show-zoom-buttons' );
const showMapTypeButton = 'true' === el.getAttribute( 'data-show-map-type-button' );
const showFullscreenButton = 'true' === el.getAttribute( 'data-show-fullscreen-button' );

let styles = '';
try {
styles = JSON.parse( el.getAttribute( 'data-styles' ) );
} catch ( e ) { }

return {
center: new LatLng( lat, lng ),
draggableCursor: ! isDraggable ? 'default' : undefined,
fullscreenControl: showFullscreenButton,
gestureHandling: isDraggable ? 'cooperative' : 'none',
mapTypeControl: showMapTypeButton,
streetViewControl: false,
styles: styles,
zoom: parseInt( el.getAttribute( 'data-zoom' ), 10 ),
zoomControl: showZoomButtons,
};

}//end extractMapOptions()

function extractMarkerPositionIfAny( el ) {

const marker = el.querySelector( '.marker' );
if ( ! marker ) {
return false;
}//end if

const lat = marker.getAttribute( 'data-lat' ) || false;
const lng = marker.getAttribute( 'data-lng' ) || false;
if ( ! lat || ! lng ) {
return false;
}//end if

return { lat, lng };

}//end extractMarkerPositionIfAny()

init();
@@ -29,9 +29,9 @@
}//end if
/**
* NELIO_MAPS
* Nelio_Maps
*/
class NELIO_MAPS {
class Nelio_Maps {
private static $instance = null;
@@ -54,8 +54,8 @@ public static function instance() {
public function init_options() {
$this->plugin_path = plugin_dir_path( __FILE__ );
$this->plugin_url = plugin_dir_url( __FILE__ );
$this->plugin_path = untrailingslashit( plugin_dir_path( __FILE__ ) );
$this->plugin_url = untrailingslashit( plugin_dir_url( __FILE__ ) );
// load textdomain.
load_plugin_textdomain( 'nelio-maps', false, basename( dirname( __FILE__ ) ) . '/languages' );
@@ -73,6 +73,7 @@ public function init_hooks() {
add_action( 'init', [ $this, 'register_google_maps_api_key_option' ] );
add_filter( 'block_categories', [ $this, 'add_extra_category' ], 9 );
add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_block_editor_assets' ], 9 );
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_block_assets' ] );
}//end init_hooks()
@@ -126,6 +127,39 @@ public function enqueue_block_editor_assets() {
}//end enqueue_block_editor_assets()
public function enqueue_block_assets() {
wp_register_script(
'google-maps',
add_query_arg(
array(
'key' => get_option( 'nelio_maps_api_key_option', '' ),
'libraries' => 'geometry,drawing,places',
),
'https://maps.googleapis.com/maps/api/js'
),
[],
$this->plugin_version,
true
);
wp_enqueue_style(
'nelio-blocks-gutenberg',
$this->plugin_url . '/assets/dist/css/blocks.css',
[],
$this->plugin_version
);
wp_enqueue_script(
'nelio-blocks',
$this->plugin_url . '/assets/dist/js/public.js',
[ 'google-maps' ],
$this->plugin_version,
true
);
}//end enqueue_block_assets()
public function admin_init() {
// Get current plugin data.
@@ -147,6 +181,6 @@ public function register_google_maps_api_key_option() {
}//end class
function nelio_maps() {
return NELIO_MAPS::instance();
return Nelio_Maps::instance();
}//end nelio_maps()
add_action( 'plugins_loaded', 'nelio_maps' );
@@ -116,6 +116,18 @@ const config = {

module.exports = [

Object.assign( {
entry: {
public: [ './assets/src/js/public/public.js' ],
},
output: {
path: path.join( __dirname, './assets/dist/' ),
filename: 'js/[name].js',
library: 'NelioBlocks',
libraryTarget: 'umd',
},
}, config ),

Object.assign( {
entry: {
blocks: './packages/blocks/index.js',

0 comments on commit 9bd9c82

Please sign in to comment.
You can’t perform that action at this time.