CODEWITHSUNDEEP
javascriptjquerygoogle-mapsjquery-uigoogle-maps-api-3
bitcodr
bitcodr

Reputation: 1454

Draggable marker in map

I'm an example map shows the current location with the click of a button shows lat,long , But I need a little change on the map
Changes :
1 - marker on the map after click button be draggable to get new lat long and show address , in fact marker be fixed on the center map and map be draggable to get new address and new lat,long

My code is :

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
   
<script type="text/javascript"> 
  		var map = null;
	function showlocation() {
		// One-shot position request.
		navigator.geolocation.getCurrentPosition(callback);
	}
	function callback(position) {
		var lat = position.coords.latitude;
		var lon = position.coords.longitude;
		document.getElementById('default_latitude').value = lat;
		document.getElementById('default_longitude').value = lon;
		var latLong = new google.maps.LatLng(lat, lon);
		var marker = new google.maps.Marker({
			position: latLong
		});
		marker.setMap(map);
		map.setZoom(16);
		map.setCenter(marker.getPosition());
	}
	google.maps.event.addDomListener(window, 'load', initMap);
	function initMap() {
		var mapOptions = {
			center: new google.maps.LatLng(0, 0),
			zoom: 1,
			mapTypeId: google.maps.MapTypeId.ROADMAP
	};
		map = new google.maps.Map(document.getElementById("map-canvas"),
				mapOptions);
	}
</script>
<input type="button"  class="btn  pull-right map-btn" value="btn " onclick="javascript:showlocation()" />

<div id="map-canvas" style="height: 300px"></div>
  
<input type="text" id="default_latitude" placeholder="Latitude"/>
<input type="text" id="default_longitude" placeholder="Longitude"/>

Upvotes: 0

Views: 4150

Answers (1)

Dhara Parmar
Dhara Parmar

Reputation: 8101

<script type="text/javascript"> 
var map = null;
var marker;

  function showlocation() {
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(callback);
  }
  function callback(position) {

if (marker != null) {
       marker.setMap(null);
    }

    var geocoder = new google.maps.Geocoder();
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    document.getElementById('default_latitude').value = lat;
    document.getElementById('default_longitude').value = lon;
    var latLong = new google.maps.LatLng(lat, lon);
    marker = new google.maps.Marker({
      position: latLong,
      draggable:true
    });
    marker.setMap(map);
    map.setZoom(16);
    map.setCenter(marker.getPosition());

    google.maps.event.addListener(marker, 'dragend', function() {
  geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        $('#default_latitude').val(marker.getPosition().lat());
        $('#default_longitude').val(marker.getPosition().lng());
     `enter code here` }
    }
  });
});

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



  function initMap() {
    var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
</script>

Upvotes: 4

Related Questions