roktas/fiddle.css

## fiddle.css
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#harita_canvas { height: 100% }

## fiddle.html
<!DOCTYPE HTML>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="./fiddle.css" type="text/css" />

	<script type="text/javascript"
		src="http://maps.googleapis.com/maps/api/js?v=3.8&sensor=false">
	</script>
</head>

	<body onload="initialize(); drop();"> <!-- onLoad da 2 fonksiyon birden calistirmak-->

	<div id="harita_canvas" style="width: 800px; height: 600px;">map div</div>

</body>
</html>

## fiddle.js
var center_europe = new google.maps.LatLng(52.536273,18.457031); // tahmini - harita ortalamak icin

var sehirler = [
	new google.maps.LatLng(41.293995,36.331358), //samsun - turkiye
	new google.maps.LatLng(39.934486,32.853241), //ankara - turkiye
	new google.maps.LatLng(59.33494,18.063583), //stockholm - isvec
	new google.maps.LatLng(58.41628,15.620499), //linkoping - isvec
	new google.maps.LatLng(57.708933,11.974556), //gothenburg - isvec
	new google.maps.LatLng(55.605148,13.003843), //malmo - isvec
	new google.maps.LatLng(55.676296,12.568338), //kopenhag - danimarka
	new google.maps.LatLng(59.442752,24.75319), //tallin - estonya
	new google.maps.LatLng(56.946342,24.104111), //riga - letonya
	new google.maps.LatLng(54.689421,25.280024), //vilinues - litvanya
	new google.maps.LatLng(59.913906,10.752241), // oslo - norvec
	new google.maps.LatLng(50.087852,14.420468), // prag - cek cumh.
	new google.maps.LatLng(47.498478,19.04076), // budapeste - macaristan
	];

var markers = [];
var iterator = 0;
var map;

function initialize() {
	var ayarlar = {
	mapTypeId: google.maps.MapTypeId.TERRAIN,
	zoom: 4,
	center: center_europe,
	disableDefaultUI: true,
	panControl: true,
	zoomControl: true,
	mapTypeControl: true,
	minZoom: 2, // Sifir zoom durumundan kacalim - duplicate dunya haritasi olusmasin
	maxZoom: 20,
	mapTypeControlOptions: {
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.LEFT_BOTTOM
		},
	scaleControl: false,
	streetViewControl: true,
	overviewMapControl: false,
	};
	map = new google.maps.Map(document.getElementById("harita_canvas"), ayarlar);
}

function drop() {
	for (var i = 0; i < sehirler.length; i++) {
	setTimeout(function() {
	addMarker();
		}, i * 300); // zamanlama degeri
	}
}

function addMarker() {
	markers.push(new google.maps.Marker({
	position: sehirler[iterator],
	map: map,
	draggable: false,
	animation: google.maps.Animation.DROP
	}));
	iterator++;
}

## fiddle.manifest
name: google-maps-api-multiple-animated
description: Google Maps API demonstration with multiple animations
authors:
  - Mustafa Serhat Dündar
normalize_css: no
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#harita_canvas { height: 100% }
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="./fiddle.css" type="text/css" />

	<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?v=3.8&sensor=false">
	</script>
	</head>

	<body onload="initialize(); drop();"> <!-- onLoad da 2 fonksiyon birden calistirmak-->

	<div id="harita_canvas" style="width: 800px; height: 600px;">map div</div>

	</body>
	</html>
	var center_europe = new google.maps.LatLng(52.536273,18.457031); // tahmini - harita ortalamak icin

	var sehirler = [
	new google.maps.LatLng(41.293995,36.331358), //samsun - turkiye
	new google.maps.LatLng(39.934486,32.853241), //ankara - turkiye
	new google.maps.LatLng(59.33494,18.063583), //stockholm - isvec
	new google.maps.LatLng(58.41628,15.620499), //linkoping - isvec
	new google.maps.LatLng(57.708933,11.974556), //gothenburg - isvec
	new google.maps.LatLng(55.605148,13.003843), //malmo - isvec
	new google.maps.LatLng(55.676296,12.568338), //kopenhag - danimarka
	new google.maps.LatLng(59.442752,24.75319), //tallin - estonya
	new google.maps.LatLng(56.946342,24.104111), //riga - letonya
	new google.maps.LatLng(54.689421,25.280024), //vilinues - litvanya
	new google.maps.LatLng(59.913906,10.752241), // oslo - norvec
	new google.maps.LatLng(50.087852,14.420468), // prag - cek cumh.
	new google.maps.LatLng(47.498478,19.04076), // budapeste - macaristan
	];

	var markers = [];
	var iterator = 0;
	var map;

	function initialize() {
	var ayarlar = {
	mapTypeId: google.maps.MapTypeId.TERRAIN,
	zoom: 4,
	center: center_europe,
	disableDefaultUI: true,
	panControl: true,
	zoomControl: true,
	mapTypeControl: true,
	minZoom: 2, // Sifir zoom durumundan kacalim - duplicate dunya haritasi olusmasin
	maxZoom: 20,
	mapTypeControlOptions: {
	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
	position: google.maps.ControlPosition.LEFT_BOTTOM
	},
	scaleControl: false,
	streetViewControl: true,
	overviewMapControl: false,
	};
	map = new google.maps.Map(document.getElementById("harita_canvas"), ayarlar);
	}

	function drop() {
	for (var i = 0; i < sehirler.length; i++) {
	setTimeout(function() {
	addMarker();
	}, i * 300); // zamanlama degeri
	}
	}

	function addMarker() {
	markers.push(new google.maps.Marker({
	position: sehirler[iterator],
	map: map,
	draggable: false,
	animation: google.maps.Animation.DROP
	}));
	iterator++;
	}
	name: google-maps-api-multiple-animated
	description: Google Maps API demonstration with multiple animations
	authors:
	- Mustafa Serhat Dündar
	normalize_css: no