How to initialize Google Maps API with geolocation ( current position of user ) with HTML5 geolocation javascript

Question

How to pass return values from showPostion function into initialize . The goal of this script is to show GoogleMap with current position of the user.

Please, see the comments in below script:

 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
  </style>
  <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?<%= API_KEYS['google']['api_key'] %>&sensor=true">
  </script>

  <script type="text/javascript">

      function getLocation(){
          {
              if (navigator.geolocation)
              {
                  navigator.geolocation.getCurrentPosition(showPosition);
              }
              else{x.innerHTML="Geolocation is not supported by this browser.";}
          }

      }

      function showPosition(position) {
          var latitude  = position.coords.latitude;
          var longitude = position.coords.longitude;
          alert('latitude:' + latitude + 'longitude:' + longitude )

       //   This function is supposed to return the current latitude and longitude of user
       //   example: 48.1673341, 17.0830998
      }


      function initialize() {

          var mapOptions = {


         //    How to pass the result from function showPosition to LatLng ?
         //    see the line below:                
         center: new google.maps.LatLng(48.1673341,17.0830998),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"),
                  mapOptions);

      }

      google.maps.event.addDomListener(window, 'load', initialize);

  $(document).ready(function(){     //  events before the windows loads
    getLocation();
  });


  </script>
</head>


<h3>Hello from Google maps </h3>


<div id="map-canvas"/>

Answer 1

Solution is to use google.maps.LatLng class and call lat() and lng() methods on this object as follows:

lat()   number  Returns the latitude in degrees.
lng()   number  Returns the longitude in degrees.

  function getLocation(){

      {
          if (navigator.geolocation)

          {

              var options = {
                  enableHighAccuracy: true,
                  timeout: 5000,
                  maximumAge: 0
              };

              navigator.geolocation.getCurrentPosition( success, error,options);
          }

          else

          { x.innerHTML= "Geolocation is not supported by this browser."; }
      }

  }

  function error(e) {

  console.log("error code:" + e.code + 'message: ' + e.message );

  }

  function success(position) {
     var  lat  = position.coords.latitude;
     var  lng =  position.coords.longitude;

     var  myLocation =   new google.maps.LatLng(lat, lng);


     var mapOptions = {
           center: new google.maps.LatLng(myLocation.lat(),myLocation.lng()),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("map-canvas"),
              mapOptions);


      var marker = new google.maps.Marker({
          position: myLocation,
          map: map,
          title:"you are here"
      });

  }
  google.maps.event.addDomListener(window, 'load', getLocation() );

Answer 2

I don't known the best way but you could parse the 2 positions

function showPosition(position) {
          var latitude  = position.coords.latitude;
          var longitude = position.coords.longitude;

          return latitude.concat(';',longitude);
      }

Than you split your position to get the longitude and latitude

var position = showPosition(position);
position = position.split(';');

// position[0] -> latitude
// position[1] -> longitude

How to initialize Google Maps API with geolocation ( current position of user ) with HTML5 geolocation javascript

Question

2 answers

solution1
3 ACCPTED

solution2
0 2013-10-18 14:57:27

How to initialize Google Maps API with geolocation ( current position of user ) with HTML5 geolocation javascript

Question

2 answers

solution1 3 ACCPTED

solution2 0 2013-10-18 14:57:27

solution1
3 ACCPTED

solution2
0 2013-10-18 14:57:27