zubairov/gist:2577095

## gistfile1.html
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <style type="text/css">
            html {
                height: 100%
            }

            body {
                height: 100%;
                margin: 0px;
                padding: 0px
            }

            #map_canvas {
                height: 100%
            }
        </style>
        <script type="text/javascript"
                src="https://maps.google.com/maps/api/js?sensor=false">
        </script>

        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>

        <script type="text/javascript">
            var map;

            function initialize() {

                var options = {
                    zoom:6,
                    center:new google.maps.LatLng(51.215, 6.776),
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), options);

                $.ajax({
                    url:"http://dev.local.host:5000/users/1234",
                    dataType:"jsonp",
                    jsonp:'callback',
                    jsonpCallback:'onLocationsCallback',
                    success:function (j) {

                    },
                    error:function (jqXHR, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }

            function onLocationsCallback(response) {

                for (var i = 0; i < response.length; i++) {
                    var next = response[i];

                    var location = new google.maps.LatLng(next.latitude, next.longitude);

                    var marker = new google.maps.Marker({
                        map:map,
                        position:location
                    });
                }
            }

        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<style type="text/css">
	html {
	height: 100%
	}

	body {
	height: 100%;
	margin: 0px;
	padding: 0px
	}

	#map_canvas {
	height: 100%
	}
	</style>
	<script type="text/javascript"
	src="https://maps.google.com/maps/api/js?sensor=false">
	</script>

	<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
	</script>

	<script type="text/javascript">
	var map;

	function initialize() {

	var options = {
	zoom:6,
	center:new google.maps.LatLng(51.215, 6.776),
	mapTypeId:google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(document.getElementById("map_canvas"), options);

	$.ajax({
	url:"http://dev.local.host:5000/users/1234",
	dataType:"jsonp",
	jsonp:'callback',
	jsonpCallback:'onLocationsCallback',
	success:function (j) {

	},
	error:function (jqXHR, textStatus, errorThrown) {
	alert(textStatus);
	}
	});
	}

	function onLocationsCallback(response) {

	for (var i = 0; i < response.length; i++) {
	var next = response[i];

	var location = new google.maps.LatLng(next.latitude, next.longitude);

	var marker = new google.maps.Marker({
	map:map,
	position:location
	});
	}
	}

	</script>
	</head>
	<body onload="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
	</html>