replace your code with as.
<?php
function myplugin_register_settings()
{
add_option('marker_pin','');
register_setting( 'marker_group', 'marker_pin', 'myplugin_callback' );
}
add_action( 'admin_init', 'myplugin_register_settings' );
function myplugin_register_options_page()
{
add_options_page('Google Map', 'Map', 'manage_options', 'Google_map', 'myplugin_options_page');
}
add_action('admin_menu', 'myplugin_register_options_page');
function plugin_admin_enqueue_styles()
{
wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBPUcMLet39Rn_MXvOJErCbT7VnsOAVPWc&libraries=places&callback=initMap', array('jquery'),'1.0', true );
wp_enqueue_script( 'ajax-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array('jquery'),'1.0', true );
wp_enqueue_script( 'code-js', 'https://code.jquery.com/jquery-1.11.3.min.js', array('jquery'),'1.0', true );
}
add_action( 'admin_enqueue_scripts', 'plugin_admin_enqueue_styles' );
function myplugin_options_page()
{?>
<div>
<?php screen_icon(); ?>
<h2>My Plugin Page Title</h2>
<form method="post" action="options.php">
<?php settings_fields( 'marker_group' ); ?>
<h3>This is my option</h3>
<p>Some text here.</p>
<table>
<tr valign="top">
<th scope="row"><label for="marker">City:</label></th>
<td>
<?php $pins = get_option('marker_pin'); ?>
<div id="pac-container">
<input id="pac_input" type="text" name="pac_input" placeholder="Enter City" value="<?php echo $pins; ?>">
</div>
</td>
</tr>
</table>
<?php submit_button(); ?>
<input type="button" value="Add Button" id='addButton'>
</form>
</div><?php
}
function update_option_fn()
{
if (isset($_POST['name_palce']) && !empty($_POST['name_palce']))
{
$name=$_POST['name_palce'];
echo $name;
update_option('marker_pin',$name);
}
}
add_action('wp_ajax_update_option_fn', 'update_option_fn');
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var place="";
function initMap()
{
var input = document.getElementById("pac_input");
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function()
{
var place = autocomplete.getPlace();
var placename = place.name;
input.value=placename;
if (!place.geometry)
{
alert("No details available for input: '" + place.name + "'");
return;
}
});
}
$(document).ready(function()
{
<?php $ajax_nonce = wp_create_nonce( "my-special-string" );?>
$('#pac_input').focusout(function()
{
var Place = $('#pac_input').val();
console.log(Place);
var wp_sec_data_post = { action: 'update_option_fn', security: '<?php echo $ajax_nonce; ?>'};
var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
wp_sec_data_post2['name_palce'] = Place;
jQuery.post( ajaxurl, wp_sec_data_post2, function( response )
{
console.log("success"+response);
});
});
$("#submit").click(function()
{
var Place = $('#pac_input').val();
console.log(Place);
var wp_sec_data_post = { action: 'update_option_fn', security: '<?php echo $ajax_nonce; ?>'};
var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
wp_sec_data_post2['name_palce'] = Place;
jQuery.post( ajaxurl, wp_sec_data_post2, function( response )
{
console.log("success"+response);
});
});
});
</script>