DCSIMG
Geolocation API and Client-Side Maps Frameworks - Gil Fink's Blog

Gil Fink's Blog

Fink about IT

News

Microsoft MVP

My Facebook Profile My Twitter Profile My Linkedin Profile

Locations of visitors to this page

Creative Commons License

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.
© Copyright 2013 Gil Fink

Hebrew Articles

Index Pages

My OSS Projects

English Articles

Geolocation API and Client-Side Maps Frameworks

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!

kick it on DotNetKicks.com Shout it Bookmark and Share
Posted: May 02 2011, 03:06 PM by Gil Fink | with 3 comment(s) |
תגים:, ,

Comments

Yoav said:

Hi Gil,

it's look like the line:     if (Modernizr.geolocation) {

should by:                   if (navigator.geolocation) {

Thanks :-)

# May 3, 2011 8:52 AM

Gil Fink said:

@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/

# May 3, 2011 10:12 AM

????????????????????? » [Web] ???????????? said:

Pingback from  ????????????????????? &raquo; [Web] ????????????

# May 16, 2011 6:31 PM