Demo of RemoteAndroid to show location on a Google map

Copy this HTML source and save it to a file. Make the changes as marked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo of RemoteAndroid to show location on a Google map</title>

<!--
        enter your Google maps API key here
-->
<script src="http://maps.google.com/maps?file=api&v=2&key=your-google-maps-api-key" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
var loc;
function callback(o) {
    loc = o;
}
function load() {
    if (!GBrowserIsCompatible()) {
        alert('Browser is not compatible with google maps');
    } else if (!loc || !loc.location) {
        alert('No location from device');
    } else {
        var gmap = document.getElementById("gmap");

        // get points
        var name = [];
        var lat = [];
        var lon = [];
        var most_recent = 0;
        for(var i=0; i<loc.location.length; i++) {
            if (loc.location[i].detail &&
                loc.location[i].detail.time > most_recent) {
                most_recent = loc.location[i].detail.time;
            }
            if (loc.location[i].detail &&
                loc.location[i].detail.latitude &&
                loc.location[i].detail.longitude)
            {
                // increase the size of the arrays
                lat[name.length] = parseFloat(loc.location[i].detail.latitude);
                lon[name.length] = parseFloat(loc.location[i].detail.longitude);
                name[name.length] = loc.location[i].name;
            }
        }

        if (name.length == 0) {
            alert("Device didn't return any locations");
            return;
        }

        // get average lat/lon
        var avg_lat = 0;
        var avg_lon = 0;
        for(var i=0; i<name.length; i++) {
            avg_lat += lat[i];
            avg_lon += lon[i];
        }
        avg_lat /= name.length;
        avg_lon /= name.length;

        var map = new GMap2(gmap);
        var center = new GLatLng(parseFloat(avg_lat), parseFloat(avg_lon));
        map.setCenter(center, 17);

        // put markers on the map
        for(var i=0; i<name.length; i++) {
            var point = new GLatLng(parseFloat(lat[i]), parseFloat(lon[i]));
            var marker = new GMarker(point, { title:name[i] });

            // add the marker
            map.addOverlay(marker);

            // add an info window
            var s = '<u>' + name[i] + '</u>' + '<br />' + loc.location[i].detail.time_s;
            if (loc.location[i].detail.geo && loc.location[i].detail.geo.address) {
                var addr = loc.location[i].detail.geo.address;
                for(var a=0; a<addr.length; a++) {
                    s += '<br />' + addr[a];
                }
            }
            marker.bindInfoWindowHtml(s);
            if (loc.location[i].detail.time == most_recent) {
                marker.openInfoWindowHtml(s);
            }

            // zoom out if necessary
            while (!map.getBounds().containsLatLng(point)) {
                // map.zoomOut();
                map.setZoom(map.getZoom() - 1);
            }
        }

        map.addControl(new GLargeMapControl());
        map.addControl(new GOverviewMapControl());
        map.addControl(new GScaleControl());
    }
}
//]]>
</script>

<!--
        replace this with your own domain
-->
<script type="text/javascript" src="http://your-hostname-at-dot-dyndns.org:8000/remand?callback=callback&location=1&geo=1"></script>

</head>
<body onload="load();">

<div id="gmap" style="width:600px; height:400px;"></div>

</body>
</html>
Back