we can pass code from php to js

srcs/plugins/map_prof/map_prof_hooks.php

@@ -8,32 +8,49 @@ Version: 1.0.0
 Author URI:
 */
 
+
 include_once(dirname(__FILE__) . '/mp_console_log.php');
 require_once(dirname(__FILE__) . '/mp_url_api.php');
+require_once(dirname(__FILE__) . '/mp_add_to_scripts.php');
 
-add_action( 'wp_enqueue_scripts', 'wpa_enqueue_scripts' );
-function wpa_enqueue_scripts() {
+
+/**
+ * add scripts and styles to the header or the footer
+ */
+
+function mp_enqueue_scripts() {
 	wp_enqueue_style( 'mp_style',		plugins_url('mp_style.css', __FILE__),		'',					'',	'');
 	wp_enqueue_script('mp_init_map',	plugins_url('mp_init_map.js', __FILE__),	'',					'',	true);
 	wp_enqueue_script('mp_google_api',	mp_url_api(),								['mp_init_map'],	'',	true);
-//	wp_register_script('mp_init_map',	plugins_url('mp_init_map.js', __FILE__),	'',					'',	true);
-//	wp_register_script('mp_google_api',	mp_url_api(),								['mp_init_map'],	'',	true);
+	mp_get_locations();
+	mp_get_markers();
 }
+add_action( 'wp_enqueue_scripts', 'mp_enqueue_scripts' );
 
-//function wpa_defer_scripts($tag, $handle) {
-//	if ('mp_google_api' === $handle)
-//		return str_replace(' src="', ' async defer src="', $tag);
-//	if ('mp_googe_api' === $handle)
-//		return str_replace(' src="', ' defer src="', $tag);
-//	return $tag;
-//}
-//add_filter('script_loader_tag', 'wpa_defer_scripts', 10, 2);
 
-add_shortcode('lejourduprof_map', 'mp_add_div');
+
+/**
+ * to add a tag, like defer or async, to a script
+ */
+
+function mp_tag_scripts($tag, $handle) {
+	if ('mp_googe_api' === $handle)
+		return str_replace(' src="', ' async src="', $tag);
+	return $tag;
+}
+add_filter('script_loader_tag', 'mp_tag_scripts', 10, 2);
+
+
+
+/**
+ * when 'shortcode' in page, replace by 'return'
+ */
+
 function mp_add_div() {
 	$mp_api_script  = '<div id="ljdp_map">map here</div>';
 	return $mp_api_script;
 }
+add_shortcode('lejourduprof_map', 'mp_add_div');
 
 
 //function print_content($content){

srcs/plugins/map_prof/mp_add_to_scripts.php

@@ -0,0 +1,17 @@
+<?php
+function mp_get_locations() {
+	$locations = '
+		let locations = [
+			{lat: 38.8833, lng: -77.0167},
+			{lat: 39.8833, lng: -76.0167},
+		];
+	';
+	wp_add_inline_script('mp_init_map', $locations, 'before');
+}
+function mp_get_markers() {
+	$markers  =   'let icon_url = "'
+				. '/wp-content/plugins/map_prof/marker.png'
+				. '";';
+	wp_add_inline_script('mp_init_map', $markers, 'before');
+}
+?>

srcs/plugins/map_prof/mp_init_map.js

@@ -1,9 +1,12 @@
 function mp_init_map() {
-	var locations = [
-		{lat: 38.8833, lng: -77.0167},
-		{lat: 39.8833, lng: -76.0167},
-	];
-	var map = new google.maps.Map(
+
+	/*
+	 * following variable are created by mp_locations.php
+	 * - let locations
+	 * - let icon_url
+	 */
+
+	let map = new google.maps.Map(
 		document.getElementById("ljdp_map"),
 		{
 			zoom: 5,
@@ -11,11 +14,9 @@ function mp_init_map() {
 			center: locations[0],
 		}
 	);
-	var marker, icon;
-//	icon = "/wp-content/plugins/map_prof/marker.png";
+	let marker, icon;
 	icon = {
-		//url: document.location.href + "marker.png",
-		url: "/wp-content/plugins/map_prof/marker.png",
+		url: icon_url,
 		scaledSize: new google.maps.Size(35, 50)
 	};
 	for (loc of locations) {

srcs/plugins/map_prof/mp_url_api.php

@@ -2,7 +2,6 @@
 function mp_url_api() {
 	$mp_url = array(
 		'src'		=> 'https://maps.googleapis.com/maps/api/js',
-		'sensor'	=> 'false',
 		'key'		=> 'AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE',
 		'callback'	=> 'mp_init_map',
 	);