Click here to Skip to main content
Click here to Skip to main content

Geolocation API and Client-Side Maps Frameworks

, 2 May 2011
Rate this:
Please Sign up or sign in to vote.
Geolocation API and Client-Side Maps Frameworks During the wrap up of the HTML5 course that I’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 ). This post won’t introduce the frameworks or the API

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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Gil Fink
Architect Sela Group
Israel Israel
Gil Fink is an expert in web development and Microsoft web and data platforms. He works as a senior consultant and architect at Sela Group. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also a co-author of several Microsoft Official Courses and training kits and the founder of Front-End.IL meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 2 May 2011
Article Copyright 2011 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid