tried implemanting googlemap but failed for now

srcs/plugins/google_map/index.php

@@ -0,0 +1,82 @@
+<?php
+/* Plugin Name: Google Map
+   Plugin URI: https://www.inkthemes.com/
+   Description: Integrate Google Maps on any page or post in a simple way.
+   Version: 1.0
+   Author: Jaya Rai
+   Author URI: https://www.inkthemes.com/
+ */
+?>
+
+<?php
+
+// Error: Publishing failed. The response is not a valid JSON response.
+// -> https://wordpress.org/support/topic/publishing-failed-error-message-the-response-is-not-a-valid-json-response-2/
+// - solution permalink -> broken
+//     - permalink broken : https://wordpress.org/support/topic/permalinks-change-breaks-all-links/
+// - solution classic editor -> ok
+
+add_action('admin_menu', 'ink_menu_page');
+
+function ink_menu_page() {
+	add_menu_page('GM', 'Google Map', 'manage_options', 'gm_setting', 'ink_gm_setting', '', 120);
+}
+
+function ink_gm_setting(){
+?>
+	<h2> Google Map </h2>
+	<form action="" method="post">
+		<div class="ink_set">
+			<label>Latitude : </label>
+			<input type="text" name="latitude" class="gm_lat">
+		</div>
+		<div class="ink_set">
+			<label>Longitude : </label>
+			<input type="text" name="longitude" class="gm_log">
+		</div>
+		<div class="ink_set">
+			<label>Zoom : </label>
+			<input type="text" name="zoom" class="gm_zoom">
+		</div>
+		<input type="submit" name="submit" class="submit_button">
+	</form>
+<?php
+}
+
+if(isset($_POST['submit'])){
+	$latitude = $_POST['latitude'];
+	$logitude = $_POST['longitude'];
+	$zoom = $_POST['zoom'];
+	$map_type = $_POST['map_type'];
+	update_option('googleMap_latitude_position', $latitude );
+	update_option('googleMap_longitude_position', $logitude );
+	update_option('map_zoom_value', $zoom);
+}
+
+add_action( 'init', 'my_script' );
+
+function my_script() {
+	wp_enqueue_script('my_script', plugins_url('js/script.js', __FILE__), array('jquery'));
+	wp_enqueue_style('my_style', plugins_url('css/style.css', __FILE__));
+}
+
+function show_google_map() {
+	global $wpdb;
+	$GoogleMap_Latitude = get_option('googleMap_latitude_position');
+	$GoogleMap_Longitude = get_option('googleMap_longitude_position');
+	$GoogleMap_zoom = get_option('map_zoom_value');
+
+	?>
+	<script
+		src="http://maps.googleapis.com/maps/api/js?&sensor=false?key=AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE">
+	</script>
+	<div class="latitude"> <?php echo $GoogleMap_Latitude; ?> </div>
+	<div class="longitude" > <?php echo $GoogleMap_Longitude; ?></div>
+	<div class="zoom"> <?php echo $GoogleMap_zoom; ?></div>
+	<div id="showmap"> </div>
+	<?php
+}
+
+add_shortcode('googlemap', 'show_google_map');
+
+?>

srcs/plugins/google_map/script.js

@@ -0,0 +1,21 @@
+jQuery(document).ready(function() {
+	var lat = jQuery('.latitude').text();
+	var lng = jQuery('.longitude').text();
+	var zoom = parseInt(jQuery('.zoom').text());
+
+	function initialize(){
+		var myCenter = new google.maps.LatLng(lat, lng);
+		var mapProp = {
+			center: myCenter,
+			zoom: zoom,
+			mapTypeId:google.maps.MapTypeId.ROADMAP
+		};
+		var map=new google.maps.Map(document.getElementById("showmap"),mapProp);
+		marker = new google.maps.Marker({
+			position: myCenter,
+			animation: google.maps.Animation.BOUNCE
+		});
+		marker.setMap(map);
+	}
+	google.maps.event.addDomListener(window, 'load', initialize);
+});

srcs/plugins/google_map/style.css

@@ -0,0 +1,31 @@
+.ink_set{
+	margin-top: 10px;
+}
+
+.latitude, .longitude, .zoom {
+	display:none;
+}
+
+#showmap{
+	width:500px;
+	height:380px;
+	border: 2px solid rgb(207, 203, 203);
+	margin-top:10px;
+}
+
+.submit_button{
+	margin-top:20px;
+}
+
+.gm_lat{
+	margin-left: 20px;
+}
+
+.gm_log{
+	margin-left: 10px;
+}
+
+.gm_zoom{
+	margin-left: 35px;
+}
+