Google maps create markers on right click of map and draggable markers

by SHELDON PASCIAK

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<title>Google Map Markers and InfoWindows - Demo</title>

<a href="http://www.sanwebe.com/2013/10/google-map-v3-markers-and-infowindow-with-jquery">Go to article page</a>

<div class="grid">

<div align="center">Right Click to Drop a New Marker</div>
<div id="google_map"></div>
  </div>

CSS

h1.heading{padding:0px;margin: 0px 0px 10px 0px;text-align:center;font: 18px Georgia, "Times New Roman", Times, serif;}

/* width and height of google map */
#google_map {width: 100%;height: 500px;margin-top: 10px;margin-left: auto;margin-right: auto;border: 6px solid #C4B2FF;border-radius: 5px;}

/* Marker Info Window */
h1.marker-heading{color: #585858;margin: 0px;padding: 0px;font: 18px "Trebuchet MS", Arial;border-bottom: 1px dotted #D8D8D8;}
div.marker-info-win {margin-right: -20px;}
div.marker-info-win p{padding: 0px;margin: 10px 0px 10px 0;}
div.marker-inner-win{padding: 5px;}
button.save-marker, button.remove-marker{
	border: none;
	background: rgba(0, 0, 0, 0);
	color: #00F;
	padding: 0px;
	text-decoration: underline;
	margin-right: 10px;
	cursor: pointer;
}

JavaScript

var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
var map;
map_initialize(); // load map
function map_initialize(){
	//Google map option
	var googleMapOptions = 
	{ 
		center: mapCenter, // map center
		zoom: 17, //zoom level, 0 = earth view to higher value
		panControl: true, //enable pan Control
		zoomControl: true, //enable zoom control
		zoomControlOptions: {
		style: google.maps.ZoomControlStyle.SMALL //zoom control size
		},
		scaleControl: true, // enable scale control
		mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
	};
	map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);	
  
	
    //##### drop a new marker on right click ######
	google.maps.event.addListener(map, 'rightclick', function(event) {		
		var marker = new google.maps.Marker({
			position: event.latLng, //map Coordinates where user right clicked
			map: map,
			draggable:true, //set marker draggable 
			animation: google.maps.Animation.DROP, //bounce animation
			title:"Hello World!",
			icon: "http://lostwords.org/images/penguin.png" ,//custom pin icon
      size: new google.maps.Size(20, 32)
		});
		
		//Content structure of info Window for the Markers
		var contentString = $('<div class="marker-info-win">'+
		'<div class="marker-inner-win"><span class="info-content">'+
		'<h1 class="marker-heading">New Marker</h1>'+
		'This is a new marker infoWindow'+ 
		'</span>'+
		'<br /><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button></div></div>');
			
		//Create an infoWindow
		var infowindow = new google.maps.InfoWindow();
		
		//set the content of infoWindow
		infowindow.setContent(contentString[0]);
		
		//add click listner to marker which will open infoWindow 		 
		google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map,marker); // click on marker opens info window 
	    });
		

		//###### remove marker #########/
		var removeBtn 	=...