CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3geolocation
ray
ray

Reputation: 59

Google Map get current location that can be changed by dragging the pin

This is my first post so i'm sorry if it has been asked before.

I have a form users fill out on mobile devices which captures there longitude and latitude using JavaScript geolocation. this isn't always the most accurate so I am trying to combine geolocation and google map draggable pin.

So the user opens the page, geolocation enters the current lon and lat in the script below, if its wrong they can then drag the pin to the right location which updates the text fields.

I have tried every thing and have had mixed results...if someone could help me out that would be great.

I hope this makes sense...if not im happy to explain more

The script below enables you to drag the pin and updates the two text field with the lon and lat.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <input type="text" id="latitude" placeholder="latitude">
  <input type="text" id="longitude" placeholder="longitude">
  <div id="map" style="width:500px; height:500px"></div>
  
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script>
	function initialize() {
		var $latitude = document.getElementById('latitude');
		var $longitude = document.getElementById('longitude');
		var latitude = 50.715591133433854
		var longitude = -3.53485107421875;
		var zoom = 7;
		
		var LatLng = new google.maps.LatLng(latitude, longitude);
		
		var mapOptions = {
			zoom: zoom,
			center: LatLng,
			panControl: false,
			zoomControl: false,
			scaleControl: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}	
		
		var map = new google.maps.Map(document.getElementById('map'),mapOptions);
      
		
		var marker = new google.maps.Marker({
			position: LatLng,
			map: map,
			title: 'Drag Me!',
			draggable: true
		});
		
		google.maps.event.addListener(marker, 'dragend', function(marker){
			var latLng = marker.latLng;
			$latitude.value = latLng.lat();
			$longitude.value = latLng.lng();
		});
		
		
	}
	initialize();
	</script>
  
</body>
</html>

Upvotes: 4

Views: 7608

Answers (2)

Emmanuel Delay
Emmanuel Delay

Reputation: 3679

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    function initialize() {
      var map;
      var position = new google.maps.LatLng(50.45, 4.45);    // set your own default location.
      var myOptions = {
        zoom: 15,
        center: position
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

      // We send a request to search for the location of the user.  
      // If that location is found, we will zoom/pan to this place, and set a marker
      navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);

      function locationFound(position) {
        // we will zoom/pan to this place, and set a marker
        var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // var accuracy = position.coords.accuracy;

        map.setCenter(location);
        var marker = new google.maps.Marker({
            position: location, 
            map: map, 
            draggable: true,
            title: "You are here! Drag the marker to the exact location."
        });
        // set the value an value of the <input>
        updateInput(location.lat(), location.lng());

        // Add a "drag end" event handler
        google.maps.event.addListener(marker, 'dragend', function() {
          updateInput(this.position.lat(), this.position.lng());
        });


      }

      function locationNotFound() {
        // location not found, you might want to do something here
      }

    }
    function updateInput(lat, lng) {
      document.getElementById("my_location").value = lat + ',' + lng;
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
  width: 500px;
  height: 400px;
}
</style>
<div id="map-canvas"></div>
Location:<br>
<input id="my_location" readonly="readonly">

Upvotes: 0

MrUpsidown
MrUpsidown

Reputation: 22486

You can get the user location from the navigator.geolocation:

navigator.geolocation.getCurrentPosition(function (position) {

    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    latPosition = position.coords.latitude;
    longPosition = position.coords.longitude;
});

Then you can use these values to fill in your coordinates inputs and/or to place a marker on the map, as in my demo below.

JSFiddle demo

Upvotes: 0

Related Questions