GtugGoSandbox / mapgame / www / bk.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script> 
    <link href="http://fonts.googleapis.com/css?family=Limelight&v1" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Metrophobic&v1" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    html {
        height: 100%;
    }
    h1.title {
        font-size: 18px;
        font-family: 'Metrophobic', arial, serif; 
    }
    body {
        height: 100%;
        margin: 0px; padding: 0px; font-family: 'Metrophobic', arial, serif;
    }
    #map_panel { 
        height: 100% 
    }
    #right_panel {
        height: 100%; position: fixed; top: 0; right: 0; width:200px;
    }
    #top_panel {
        height: 30px; position: fixed; left: 80px; bottom: 0; z-index: 10; width:100%
    }
    </style>
    <script type="text/javascript">
$(function() {
      // (3.088659288677284, 101.70668882751465)
    var latlng = new google.maps.LatLng(3.088,  101.70);
    var mapOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
    };
    
    var map = new google.maps.Map(document.getElementById("map_panel"), mapOptions);
        
    var mgr = new MarkerManager(map, {trackMarkers: true, maxZoom: 15});
    var right_panel_width = 200;
    
    var mgr2 = new MarkerManager(map, {trackMarkers: true, maxZoom: 15});
    
    $(window).bind('resize', function(){
        $('#map_panel').width($(window).width() - right_panel_width);
    });
    $('#map_panel').width($(window).width() - right_panel_width);
    var mylocation = null;
    
    function array_to_markers(array) {
        var markers = [];
        
        for (var i = 0; i < array.length; i++) {
            var details = array[i];
            markers[i] = new google.maps.Marker({
              title: details.name,
              position: new google.maps.LatLng(
                  details.location[0], details.location[1]),
              clickable: false,
              draggable: false,
              flat: true
            });
            
          }
      
        return markers;
    }
    function array_to_markers2(array) {
        var markers = [];
        
        for (var i = 0; i < array.length; i++) {
            var details = array[i];
            markers[i] = new google.maps.Marker({
              title: details.name,
              position: new google.maps.LatLng(
                  details.location[0], details.location[1]),
              clickable: false,
              draggable: false,
              flat: true
            });
            
          }
      
        return markers;
    }
    
    navigator.geolocation.getCurrentPosition(function(location) {
        var latlng = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
        
        loc = [ {'name': 'My Location', 'location': [location.coords.latitude, location.coords.longitude]}];
        if (!mylocation) {
            var a = array_to_markers(loc);
            google.maps.event.addListener(mgr, 'loaded', function() {
                // Have to wait for mgr to be ready, or else we can't draw
                mgr.clearMarkers();
                mgr.addMarkers(a , 0, 15);
                mgr.refresh();
            });
        }
        mylocation = latlng;
    });
    var marker_location = null;
    var update_interval = 1000; // milliseconds
    var update_markers = function() {
        //console.debug('ping');
        $.ajax({
            url: '/position/',
            dataType: 'json',
            success: function(data) {
                var d = [];
                //console.debug(data.Location);
                /*
                if (data.Location[0] > 3) {
                    var lat = data.Location[1];
                    data.Location[1] = data.Location[0];
                    data.Location[0] = lat;
                }*/
                d.push({'name': data.Name, 'location': data.Location});
                var b = array_to_markers2(d);
                marker_location = data.Location;
                mgr2.clearMarkers();
                mgr2.addMarkers(b, 0, 15);
                mgr2.refresh();
                
            }
        });
        setTimeout(update_markers, update_interval);
    }
    setTimeout(update_markers, update_interval);
    
    $('#current_location').click(function() {
        if (mylocation) {
            map.panTo(mylocation);
        }
        
        return false;
    });
    $('#goto_malaysia').click(function() {
        var latlng = new google.maps.LatLng(3.088,  101.70);
        map.panTo(latlng);
        return false;
    });
    $('#goto_marker').click(function() {
        if (!marker_location) {
            return false;
        }
        var latlng = new google.maps.LatLng(marker_location[0],  marker_location[1]);
        //console.debug(marker_location);
        map.panTo(latlng);
        return false;
    });
});
</script>
    
</head>
<body >
<div id='top_panel'>
</div>

<div id="map_panel"></div>

<div id='right_panel'>
    <h1 class='title'>Gtug App Engine Go</h1>
    <p>Debugging stuff goes here.</p>
    <ul>
        <li><a href='#' id='goto_malaysia'>Zoom Malaysia</a></li>
        <li><a href='#' id='current_location'>Go to current Location</a></li>
        <li><a href='#' id='goto_marker'>Go to marker position</a></li>
    </ul>
</div>

</body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.