Sunday, May 20, 2012

Google Maps JavaScript API v3 Example in asp.net



<head runat="server">
    <title>Google Maps JavaScript API v3 Example in asp.net</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">

        google.maps.event.addDomListener(window, 'load', initialize); //run when after page load
        var map;
        var markercode;
        var markermyLatlng;
        var markermyLatlngCount=0;

        function initialize() {
            var Lat=<%= dbLat %>;
            var Lon=<%= dbLon %>;
            var myOptions = {
                center: new google.maps.LatLng(Lat, Lon),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


            markercode = new google.maps.Marker({
                draggable:false,
                animation: google.maps.Animation.DROP,
                map:map,
                position: new google.maps.LatLng(Lat, Lon),
                title:"mattanchery - from code page!"
            });

            google.maps.event.addListener(markercode, 'click', toggleBounce);
        }

        function toggleBounce() {
            if (markercode.getAnimation() != null) {
                markercode.setAnimation(null);
            } else {
                markercode.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        function BtnLocateMe_onclick() {
            var myLatlng;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                    if(markermyLatlngCount==0){
                        markermyLatlng = new google.maps.Marker({
                            draggable:true,
                            animation: google.maps.Animation.DROP,
                            map:map,
                            position: myLatlng,
                            title:"I am here!"
                        });
                        markermyLatlngCount=markermyLatlngCount+1;
                    }
                    else
                    {
                        map.setCenter(myLatlng);              
                    }
                },
                function () {
                    handleNoGeolocation(true);
                });
            } else {
                handleNoGeolocation(false);
            }
        }

        function handleNoGeolocation(errorFlag) {
            if (errorFlag) {
                var content = 'Error: The Geolocation service failed or blocked.';
            } else {
                var content = 'Error: Your browser doesn\'t support geolocation.';
            }
            alert(content);
         }

    </script>
    <style type="text/css">
        #map_canvas
        {
            height: 543px;
            width: 754px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="BtnLocateMe" type="button" value="Locate Me" onclick="BtnLocateMe_onclick()" />
    <div id="map_canvas"></div>
    </div>
    </form>
</body>

CODE:


    public string dbLat = "9.964455";
    public string dbLon = "76.253099";
    protected void Page_Load(object sender, EventArgs e)
    {


    }

No comments:

Post a Comment