Update Google Map API for google_map extension.

Signed-off-by: Kev Provance <[email protected]>

Author: kprovance

README.md

@@ -1,5 +1,5 @@
 ## Redux Framework
-[![WordPress plugin](https://img.shields.io/wordpress/plugin/v/redux-framework.svg?maxAge=3600)](https://wordpress.org/plugins/redux-framework) [![WordPress](https://img.shields.io/wordpress/v/redux-framework.svg?maxAge=3600)](https://wordpress.org/download/) [![Build Status](https://travis-ci.org/reduxframework/redux-framework.png?branch=master)](https://travis-ci.org/reduxframework/redux-framework) [![Slack](https://redux-slackin.herokuapp.com/badge.svg)](https://redux-slackin.herokuapp.com)
+[![WordPress plugin](https://img.shields.io/wordpress/plugin/v/redux-framework.svg?maxAge=3600)](https://wordpress.org/plugins/redux-framework) [![WordPress](https://img.shields.io/wordpress/v/redux-framework.svg?maxAge=3600)](https://wordpress.org/download/)
 
 ## New to Version 4.4 ##
 * The Extendify Templates and Patterns library has been unbundled from Redux. To continue using Extendify, please download the standalone plugin from the WordPress.org repository: [https://wordpress.org/plugins/extendify](https://wordpress.org/plugins/extendify)
@@ -27,6 +27,9 @@
 * Removed: `async_typography` global arg.  Google no longer supports it.  Use `font_display` with one of the following `auto|block|swap|fallback|optional`.  See: [https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)
 * Automatic update option for Google Fonts without a Pro subscription.
 
+## Join us on Slack ##
+[Redux Slack](https://join.slack.com/t/redux/shared_invite/zt-1op7uw3up-kXgZp4Y93TeCSmq_LALl~Q)
+
 ## Follow us on Social Media! ##
 [![Follow us on Twitter](https://www.download82.com/images/produse/iconuri/twitter-for-android.png "Follow us on Twitter")](https://www.twitter.com/ReduxFramework)
 [![Like us on Facebook](https://addons.thunderbird.net/user-media/addon_icons/79/79494-64.png "Like us on Facebook")](https://www.facebook.com/ReduxFramework/)

redux-core/assets/css/redux-fields.min.css

@@ -22,7 +22,7 @@ class Redux_Extension_Google_Maps extends Redux_Extension_Abstract {
 		 *
 		 * @var string
 		 */
-		public static $version = '4.3.21';
+		public static $version = '4.4.0';
 
 		/**
 		 * Extension friendly name.

redux-core/assets/css/redux-fields.min.css.map

@@ -362,25 +362,39 @@ public function enqueue() {
 
 			$api_key = '';
 			if ( ! empty( $this->api_key ) ) {
-				$api_key = '&key=' . $this->api_key;
+				//$api_key = '&key=' . $this->api_key;
+				$api_key = $this->api_key;
 			}
 
-			wp_enqueue_script(
-				'redux-field-google_maps-api',
-				'//maps.googleapis.com/maps/api/js?v=' . $this->field['map_version'] . $api_key . '&libraries=places',
-				array( 'jquery' ),
-				$this->field['map_version'],
-				true
-			);
+			//wp_enqueue_script(
+			//	'redux-field-google_maps-api',
+			//	'//maps.googleapis.com/maps/api/js?v=' . $this->field['map_version'] . $api_key . '&libraries=places&callback=initMap',
+			//	array( 'jquery' ),
+			//	$this->field['map_version'],
+			//	true
+			//);
 
-			wp_enqueue_script(
+			wp_register_script(
 				'redux-field-google_maps-js',
 				$this->url . 'redux-google-maps' . $min . '.js',
-				array( 'jquery', 'redux-js', 'redux-field-google_maps-api' ),
+				array( 'jquery', 'redux-js' ),
 				Redux_Extension_Google_Maps::$version,
 				true
 			);
 
+			if ( ! wp_script_is('redux-field-google_maps-js','enqueued') ) {
+				$script = '(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+					key:"' . $api_key . '",
+					v:"' . $this->field['map_version'] . '",
+					libraries:"places",
+					callback:"initMap"
+				});';
+
+				wp_add_inline_script( 'redux-field-google_maps-js', $script );
+			}
+
+			wp_enqueue_script( 'redux-field-google_maps-js' );
+
 			if ( $this->parent->args['dev_mode'] ) {
 				wp_enqueue_style(
 					'redux-field-google_maps',

redux-core/inc/extensions/google_maps/class-redux-extension-google-maps.php

@@ -4,6 +4,13 @@
 
 /* global jQuery, document, redux_change, redux, google */
 
+//async function initMap() {
+//	const { Map } = await google.maps.importLibrary("maps");
+//	console.log(map);
+//}
+
+//initMap();
+
 (function( $ ) {
 	'use strict';
 
@@ -113,7 +120,7 @@
 	};
 
 	/* MAP RENDER FUNCTION */
-	redux.field_objects.google_maps.renderMap = function( el, mapClass ) {
+	redux.field_objects.google_maps.renderMap = async function( el, mapClass ) {
 		var scrollWheel;
 		var streetView;
 		var mapType;
@@ -134,7 +141,11 @@
 
 		// Create the autocomplete object, restricting the search
 		// to geographical location types.
-		g_autoComplete = new google.maps.places.Autocomplete(
+		//var x = new google.maps
+		//console.log(x);
+		//g_autoComplete = new google.maps.importLibrary("places").Autocomplete(
+		g_autoComplete = await google.maps.importLibrary( 'places' );
+		var ac = new g_autoComplete.Autocomplete(
 			( document.getElementById( autocomplete ) ),
 			{
 				types: ['geocode']
@@ -517,7 +528,7 @@
 	redux.field_objects.google_maps.setupClickListener = function( id, types ) {
 		var radioButton = document.getElementById( id );
 
-		google.maps.event.addEventListener(
+		google.maps.event.addListener(
 			radioButton,
 			'click',
 			function() {