we can pass code from php to js

:w

@@ -1,132 +0,0 @@
-<?php
-/*
-Plugin Name: map_prof
-Plugin URI:
-Description: add/remove locations on map at publication/deletion of posts
-Author: hugogogo
-Version: 1.0.0
-Author URI:
-*/
-
-include_once('./console_log.php');
-//require_once('./mp_gapi.php');
-
-function wpa_enqueue_scripts() {
-	$path = plugins_url('mp_style.css', __FILE__);
-	wp_enqueue_style('mp_style', $path, [], null, false);
-
-//	$path = mp_url_api();
-//	wp_enqueue_script('mp_gapi', $path, [], null, true);
-
-	$path = plugins_url('mp_create_map.js', __FILE__);
-//	wp_enqueue_script('mp_create_map', $path, ['mp_gapi'], null, true);
-	wp_enqueue_script('mp_create_map', $path, [], null, true);
-}
-add_action( 'wp_enqueue_scripts', 'wpa_enqueue_scripts' );
-
-function mp_add_div() {
-	$mp_api_script  = '<div id="map"></div>';
-	return $mp_api_script;
-}
-function mp_add_api() {
-	$mp_create_url = array(
-		'src' => 'https://maps.googleapis.com/maps/api/js',
-		'key' => 'AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE',
-		'callback' => 'mp_init_map',
-	);
-	$mp_src = "";
-	foreach ($mp_create_url as $url_key => $url_value) {
-		if ($url_key === 'src') {
-			$mp_src .= $url_value;
-			if (count($mp_create_url > 1))
-				$mp_src .= "?";
-		}
-		else
-			$mp_src .= "&" . $url_key . "=" . $url_value;
-	};
-
-	$mp_api_script = '<script async defer ';
-	$mp_api_script .= 'src="' . $mp_src . '"></script>';
-	return $mp_api_script;
-}
-function show_map() {
-	$mp_api_script  = mp_add_div();
-	$mp_api_script .= mp_add_api();
-	return $mp_api_script;
-}
-add_shortcode('lejourduprof_map', 'show_map');
-//add_shortcode('lejourduprof_map', 'mp_add_div');
-
-
-//function print_content($content){
-//
-//	// print only on the page 'map', and other conditions
-//	// https://developer.wordpress.org/reference/hooks/the_content/
-//	if (!( is_page('map_prof') && in_the_loop() && is_main_query() ))
-//		return $content;
-//
-//	// https://developer.wordpress.org/reference/functions/get_posts/
-//	$get_posts_args = array(
-//		'numberposts' => -1,
-//		'post_status' => 'publish',
-//	);
-//
-//	$posts_list = get_posts($get_posts_args);
-//	$content .= "<p>";
-//	$content .= "nb posts published : ";
-//	$content .= count($posts_list);
-//	$content .= "</p>";
-//	foreach ($posts_list as $post_value) {
-//		$content .= "<div>";
-//		$content .= "- post title: [";
-//		$content .= $post_value->post_title;
-//		$content .= "] - content: [";
-//		$content .= $post_value->post_content;
-//		$content .= "]";
-//		$content .= "</div>";
-//	}
-//
-//	// TESTS : print posts full content
-//	//
-//	//$posts_list = get_posts($args);
-//	//$content .= "<p>";
-//	//$content .= "nb posts published : ";
-//	//$content .= count($posts_list);
-//	//$content .= "</p>";
-//	//foreach ($posts_list as $post_key => $post_value) {
-//	//	$content .= "<p>";
-//	//	$content .= "post content : ";
-//	//	$content .= $post_key;
-//	//	$content .= " : ";
-//	//	$content .= "<br>";
-//	//	foreach ($post_value as $key => $value) {
-//	//		$content .= "- [";
-//	//		$content .= $key;
-//	//		$content .= "]: [";
-//	//		$content .= $value;
-//	//		$content .= "]<br>";
-//	//	}
-//	//	$content .= "</p>";
-//	//}
-//
-//	$content .= '<div id="map"></div>';
-//	$content .= '<script>
-//				function initMap() {
-//					var location = {lat: 38.8833, lng: -77.0167};
-//					var map = new google.maps.Map(document.getElementById("map"), {
-//						zoom: 12,
-//						center: location
-//					});
-//					var marker = new google.maps.Marker({
-//						position: location,
-//						map: map
-//					});
-//				}
-//				</script>';
-//	$content .= '<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE&callback=initMap"></script>';
-//
-//	return $content;
-//};
-//add_action('the_content', 'print_content', 1);
-
-?>

README.md

@@ -15,6 +15,8 @@
 - [my post on unix stack](https://unix.stackexchange.com/questions/722503/symlink-doent-works-with-nginx-and-php-fpm-and-docker/722511#722511)
 - [my post on wordpress stack](https://wordpress.stackexchange.com/questions/410735/i-dont-understand-how-symlinks-in-plugin-work)
 - [maps api in php](http://www.learningaboutelectronics.com/Articles/Google-maps-API-JSON-PHP.php)
+- [google maps api url parameters](https://developers.google.com/maps/documentation/javascript/url-params)
+
 
 ---
 ---

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);
+	mp_get_locations();
-//	wp_register_script('mp_google_api',	mp_url_api(),								['mp_init_map'],	'',	true);
+	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},
+	 * following variable are created by mp_locations.php
-	];
+	 * - let locations
-	var map = new google.maps.Map(
+	 * - 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;
+	let marker, icon;
-//	icon = "/wp-content/plugins/map_prof/marker.png";
 	icon = {
-		//url: document.location.href + "marker.png",
+		url: icon_url,
-		url: "/wp-content/plugins/map_prof/marker.png",
 		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',
 	);