Wordpress admin add Google Maps Metabox

functions.php

<?php

// ... include at the end of functions.php
// 1. Add google maps -- REQUIRED GOOGLE MAPS API KEY
function wp_google_scripts() {
	$API_KEY = "AIzaSyAj1hqhXwaUnJDZzisebduqKg2QFsCYCS4";
	wp_enqueue_script( 'google-maps-native', "http://maps.googleapis.com/maps/api/js?key=".$API_KEY);
}
add_action( 'admin_enqueue_scripts', 'wp_google_scripts' );


// 2. Create Metabox
function add_embed_gmaps_meta_box() {
    add_meta_box(
        'gmaps_embed_meta_box', // $id
        'Post Embed Google Maps', // $title
        'show_embed_gmaps_meta_box', // $callback
        'post', // $page
        'normal', // $context
        'high'); // $priority
}
add_action('add_meta_boxes', 'add_embed_gmaps_meta_box');

// 3. Show Metabox Contents
function show_embed_gmaps_meta_box() {
    global $post;  
	$lat = get_post_meta($post->ID, 'lat', true);  
	$lng = get_post_meta($post->ID, 'lng', true); 
	$nonce = wp_create_nonce(basename(__FILE__));
?>
<div class="maparea" id="map-canvas"></div>
<input type="hidden" name="glat" id="latitude" value="<?php echo $lat; ?>">
<input type="hidden" name="glng" id="longitude" value="<?php echo $lng; ?>">
<input type="hidden" name="custom_meta_box_nonce" value="<?php echo $nonce; ?>">  
<?php
}

// 4. Add Javascript Logic + custom style
add_action('admin_print_styles-post.php', 'custom_js_css');
add_action('admin_print_styles-post-new.php', 'custom_js_css');

function custom_js_css() {
	global $post;
    wp_enqueue_style('gmaps-meta-box', get_stylesheet_directory_uri() . '/js/gmaps/style.css');
    wp_enqueue_script('gmaps-meta-box', get_stylesheet_directory_uri() . '/js/gmaps/maps.js');
    $helper = array(
    	'lat' => get_post_meta($post->ID,'lat',true),
    	'lng' => get_post_meta($post->ID,'lng',true)
    );
    wp_localize_script('gmaps-meta-box','helper',$helper);
}


// 5. Save Metaboxes.
function save_embed_gmap($post_id) {   
    // verify nonce
    if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
        return $post_id;
        
    // check autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return $post_id;
        
    // check permissions
    if ('page' == $_POST['post_type']) {
        if (!current_user_can('edit_page', $post_id))
            return $post_id;
        } elseif (!current_user_can('edit_post', $post_id)) {
            return $post_id;
    }  
    
    $oldlat = get_post_meta($post_id, "lat", true);
    
    $newlat = $_POST["glat"]; 
    if ($newlat != $oldlat) {
        update_post_meta($post_id, "lat", $newlat);
    } 

    $oldlng = get_post_meta($post_id, "lng", true);
    
    $newlng = $_POST["glng"]; 
    if ($newlng != $oldlng) {
        update_post_meta($post_id, "lng", $newlng);
    } 
}
add_action('save_post', 'save_embed_gmap');

maps.js

function initialize() {
	var hlat = parseFloat(helper.lat)||39.0000;
	var hlng = parseFloat(helper.lng)||22.0000;

	var myLatLng = new google.maps.LatLng(hlat,hlng);
	var mapOptions = {
	  center: myLatLng,
	  zoom: 5
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'),
	    mapOptions);
	var marker = new google.maps.Marker({position: myLatLng, map: map, draggable: true});
	marker.setMap(map);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });


	function placeMarker(location) {



	    if (marker == undefined){
	        marker = new google.maps.Marker({
	            position: location,
	            map: map,
	            animation: google.maps.Animation.DROP
	        });
	    }
	    else {
	        marker.setPosition(location);
	    }
	    map.setCenter(location);
	    //console.log(location.lat()+" "+location.lng());		// click debug
	    document.getElementById("latitude").value = location.lat();
	    document.getElementById("longitude").value = location.lng();
	}

}
google.maps.event.addDomListener(window, 'load', initialize);

style.css

.maparea {
	height: 50vh;
	width: 100%;
}

How can i input latitude longitude through post metabox and show the generated map in a page/post template ?

Nice snippet!
Changing line 15 watch for the drop (drag end) of the marker makes more sense I think

  google.maps.event.addListener(marker, 'dragend', function(event) {
        placeMarker(event.latLng);
    });