Gmap3 JSON Marker interactive

Gmap3 JSON Marker interactive

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://www.mindboxdesigns.com/test-scripts/gmap3.min.js"></script>
<div id="test1" class="gmap3"></div>
<div id="drag_marker_array"> <span>[</span>

    <p id="inputArray"></p> <span>]</span>

</div>

CSS

.gmap3 {
    margin: 20px auto;
    border: 1px dashed #C0C0C0;
    width: 500px;
    height: 250px;
}

JavaScript

$(document).ready(function () {
	var mapOpts = {
		center: [-2.2214281090541204, -78.695068359375],
		zoom: 8,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		navigationControl: true,
		scrollwheel: true,
		disableDoubleClickZoom: true,
		streetViewControl: false,
	};
	function genId() {
		return '' + (new Date()).getTime();
	}
	
	function addMarker(map, event) {
		if (markerCount < 10) {
			var uid = genId();
			$(this).gmap3({
				marker: {
					latLng: event.latLng,
					options: {
						draggable: true,
						animation: google.maps.Animation.DROP
					},
					events: {
						click: function() {
							clearMarker(uid);
						},
						dragend: listMarkers
					},
					id: uid
				}
			});
			markerCount++;
			listMarkers();
		} else {
			return false;
		};
	}
	function listMarkers() {
		$("#test1").gmap3({
			get: {
				all: true,
				callback: function(results) {
					$("#inputArray").empty();
					$.each(results, function (i, marker) {
						$("#inputArray").append('<p>{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '</p>');
					});
				}
			}
		});
	}
	function clearMarker(uid) {
		console.log(uid);
		$('#test1').gmap3({
			clear: {
				id: uid,
				callback: function() {
					listMarkers();
					markerCount--;ds
				}
			}
		});
	}

	var markerCount = 0;

	$("#test1").gmap3({
		map: {
			options: mapOpts,ádasd
			events: {
				click: addMarker
			}
		}
	});
});