Geolocation API and Client-Side Maps Frameworks

May 2, 2011

2 comments

Geolocation API and Client-Side Maps Frameworks

During the wrap up of the HTML5 course that Geolocation API and Maps FrameworksI’m currently co-authoring, I’ve created two examples of using Geolocation API with Google Maps and with Bing Maps (I didn’t want to deprive any of them Smile). This post won’t introduce the frameworks or the APIs. On the other hand try to find the differences of doing almost the same thing in both of the client-side maps frameworks.

Google Maps and Geolocation API

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation API with Google Maps</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="mapElement" style="width: 100%; height: 100%">
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            if (Modernizr.geolocation) {
                navigator.geolocation.getCurrentPosition(function (e) {
                    var location = new google.maps.LatLng(e.coords.latitude, e.coords.longitude);
                    var options = {
                        zoom: 12,
                        center: location,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    };
                    var map = new google.maps.Map($("#mapElement")[0], options);
                    var pin = new google.maps.Marker({
                        position: location,
                        map: map,
                        title: 'Your Current Location',
                        draggable: true,    
                        animation: google.maps.Animation.BOUNCE 
                    });
                });
            }
            else {
                alert("No Geolocation support in your browser!");
            }
        });
    </script>
</body>
</html>

Bing Maps and Geolocation API

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation API with Bing Maps</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="mapElement" style="width: 100%; height: 100%">
    </div>
    <script type="text/javascript">
        var map = null;
        var layer;
        $(document).ready(function () {
            if (Modernizr.geolocation) {
                navigator.geolocation.getCurrentPosition(function (e) {
                    generateMap(e);
                    createLayer();
                    addPushPin();
                });
            }
            else {
                alert("No Geolocation support in your browser!");
            }
        });
 
        function generateMap(e) {
            map = new VEMap('mapElement');
            var location = new VELatLong(e.coords.latitude, e.coords.longitude);
            map.LoadMap(location, 10, VEMapStyle.Hybrid);
        }
 
        function createLayer() {
            layer = new VEShapeLayer(); 
            map.AddShapeLayer(layer);
        }
 
        function addPushPin() {
            var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
            shape.SetTitle('The Current Location');            
            layer.AddShape(shape);                   
        }
    </script>
</body>
</html>

Enjoy!

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2 comments

  1. YoavMay 3, 2011 ב 8:52

    Hi Gil,
    it’s look like the line: if (Modernizr.geolocation) {
    should by: if (navigator.geolocation) {

    Thanks :-)

    Reply
  2. Gil FinkMay 3, 2011 ב 10:12

    @Yoav,
    Modernizr is a small js library that detects native availability of HTML5/CSS3 features. You can take a look at it in the following link: http://www.modernizr.com/

    Reply