CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3geolocationlocation
Najd
Najd

Reputation: 35

Allow user to enter his location (address) in website

I am working on a website that have multiple companies and employees, each company should register by entering its username,password and location on Google maps.
The location is going to appear to employees who are using an android application (Which is connected to the same website's database).

I want to know how to allow the company to specify their exact address either by typing the decimal points of the location or by using the pin to specify it on Google map or by allowing me to detect their location. I read this: https://developers.google.com/maps/documentation/javascript/tutorial but I do not know if it is what I need in my case.

Note that it is the first time for me to deal with maps so I am not deep into it.

Upvotes: 2

Views: 2214

Answers (1)

hwsw
hwsw

Reputation: 2606

I hope i understand you correctly.

One option could be something like this:

Get the user device' geolocation and put that position on a map with a draggable marker. If the position is not correct, marker can be dragged and you will get the new coords - if the marker location has been changed.

Here is the code (with jquery):

var map;
var marker;

function initialize() {
  var mapOptions = {
    zoom: 11
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
      var marker = new google.maps.Marker({
      position: pos,
      map: map,
      title: 'Here you are',
      draggable: true
      });

    $('#user-info').append('Location found using HTML5<br/>');
      map.setCenter(pos);
        google.maps.event.addListener(marker, 'dragend', function(a) {
     $('#user-info').append(a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4) +'<br/>' );
    });
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    $('#user-info').append('Error: The Geolocation service failed.');
  } else {
     $('#user-info').append('Error: Your browser doesn\'t support geolocation.');
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    };

  map.setCenter(options.position);
}

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

http://jsfiddle.net/iambnz/xdoc1nxm/

I hope this will help you. In case you will need to get the exact address, you have to add geocoding functionality.

Upvotes: 2

Related Questions