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>

Comments

  1. i have done the exact same thing but for some reason it just doesnt show up. It keeps on giving "google is undefined" error. I have white listed the URL's as well. I am able to get the location but not the map. Can you telme where I am going wrong ?

    ReplyDelete
    Replies
    1. You are not using google maps API key, which is very imp

      Delete
  2. Nice blog., thanks for your tutorial.
    i like (y)

    ReplyDelete
  3. hi kunal deogade ,

    i have done everything but i`m not getting the current lat and longti values and map not loaded.

    ReplyDelete
  4. Working Perfectly. Nice tutorial.Thankssss

    ReplyDelete
  5. hai,

    I'm not getting current location , that displayed on other locations ,what is the problem,can u tel me?

    ReplyDelete

Post a Comment

Popular posts from this blog

Insert form data into db and validate login Phonegap

Getting data from db and show in listview in Android Apache Cordova