Get Current Location and load on GoogleMap

Hi guys!

This tutorial might be helpful to all developer to get the current location and show the current location on GoogleMap.
To access the current location we need to use the Geo location. So what is the GeoLocation?
"The geolocation object provides access to location data based on the device's GPS sensor or inferred from network signals."
Geolocation provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. There is no guarantee that the API returns the device's actual location.
With the help of this

navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy:true });

getCurrentPosition is the method for get the current latitude and longitude.Here we see enableHighAccurary:ture it means if the network provider is not enable then device try to get the current location via GPS.

Google Map version 3 are using here to load the current location in Map. For this java script supported there is no need to get the API key .

index.html

 
< html> 
    < head> 
        < title>Map Example Multiple Pages< /title> 
        
        < title>jQuery mobile with Google maps< /title>
        
        < link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        < script src="http://code.jquery.com/jquery-1.8.2.min.js">< /script>
        < script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">< /script>
        < script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">< /script>
          < script type="text/javascript" src="cordova.js">< /script>
        < script>
            

            $(document).on("pageinit", "#map-page", function() {
             getcurrentlatlong();
           
            });
            
            function getcurrentlatlong(){
             
                if (navigator.geolocation)
                {              
                  alert("navigator.geolocation is supported");
                  navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy:true });
                                                //enableHighAccuracy:true means if network not enable then it ask for GPS
                }
                else{
                 alert("navigator.geolocation not supported");
                }
            }
            
            function onSuccess(position) {   // enable ur gps, it takes sometime to call till now wait   
             alert("onSuccess called");
             var lat=position.coords.latitude;
             var longi=position.coords.longitude;
             alert("latitude is: "+ lat+ " longitude is: "+ longi);
        
              mapCenter = new google.maps.LatLng(lat, longi),
                 myOptions = {
                     zoom:10,
                     mapTypeId: google.maps.MapTypeId.ROADMAP,
                     center: mapCenter,
                 },
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions),
              
                 marker = new google.maps.Marker({
                     position: new google.maps.LatLng(lat, longi),
                     map: map,
                     title:"Current Location!"
                     })
            }
            
            function onError(error){
             alert("Getting the error"+error.code + "\nerror mesg :" +error.message);
            }
         
  
        < /script>
    < /head>

    < body>
        


            

< div data-role="header">
< h1>
Maps< /h1>
< /div>

            

< div data-role="content">
< a data-role="button" data-transition="fade" href="http://www.blogger.com/blogger.g?blogID=5642871235599658673#map-page">Click to see the Map< /div>

< /div>
< /div>

        < div data-role="page" id="map-page">

            

< div data-role="header">
< h1>
Map< /h1>
< a data-icon="home" href="http://www.blogger.com/blogger.g?blogID=5642871235599658673#home-page">Home
            

            

< div class="ui-bar-c ui-corner-all ui-shadow" data-role="content" style="padding: 1em;">
< div id="map_canvas" style="height: 400px;">
< /div>
< /div>
< /div>
< /body>
< /html>