Added script to render the map in the frontend

assets/src/js/public/public.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();

nelio-maps.php

@@ -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' );

webpack.config.js

@@ -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',