Google maps v3 draggable marker
Solution 1:
Finally I found the answer:
marker = new google.maps.Marker(
{
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'dragend', function()
{
geocodePosition(marker.getPosition());
});
function geocodePosition(pos)
{
geocoder = new google.maps.Geocoder();
geocoder.geocode
({
latLng: pos
},
function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$("#mapSearchInput").val(results[0].formatted_address);
$("#mapErrorMsg").hide(100);
}
else
{
$("#mapErrorMsg").html('Cannot determine address at this location.'+status).show(100);
}
}
);
}
Source The Wizz.art
Solution 2:
Set a Position on Map using lat/lang and make the marker draggable
Using lat/lang initially sets a marker at the given point on the map
The address variable is used for title purpose. It can be ignored.
draggable:true makes the marker draggable.
-
Use event listener google.maps.event.addListener(marker, 'dragend', function(marker) To listen for changes in the marker position
function showMap(lat,lang,address) { var myLatLng = {lat: lat, lng: lang}; var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 17, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: address, draggable:true, }); google.maps.event.addListener(marker, 'dragend', function(marker){ var latLng = marker.latLng; currentLatitude = latLng.lat(); currentLongitude = latLng.lng(); jQ("#latitude").val(currentLatitude); jQ("#longitude").val(currentLongitude); }); }
Solution 3:
/**
*Receiving the value of text box and type done conversion by Number()
*/
var latitude = Number(document.getElementById("la").value);
var longitude = Number(document.getElementById("lo").value);
function initMap() {
/**
*Passing the value of variable received from text box
**/
var uluru = {
lat: latitude,
lng: longitude
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: uluru
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: uluru
});
google.maps.event.addListener(marker, 'dragend',
function(marker) {
currentLatitude = marker.position.lat();
currentLongitude = marker.position.lng();
$("#la").val(currentLatitude);
$("#lo").val(currentLongitude);
}
);
}
#map {
height: 400px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
Latitude <input type="text" id="la" name="latitude" value="28.39"> Longitude<input type="text" id="lo" name="longitude" value="84.12">
<!--Google Map API Link-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap">
Solution 4:
Here is the code which gets drag-able marker with position in text box:
/**
*Receiving the value of text box and type done conversion by Number()
*/
var latitude = Number(document.getElementById("la").value);
var longitude = Number(document.getElementById("lo").value);
function initMap() {
/**
*Passing the value of variable received from text box
**/
var uluru = {
lat: latitude,
lng: longitude
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: uluru
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: uluru
});
google.maps.event.addListener(marker, 'dragend',
function(marker) {
var latLng = marker.latLng;
currentLatitude = latLng.lat();
currentLongitude = latLng.lng();
$("#la").val(currentLatitude);
$("#lo").val(currentLongitude);
}
);
}
#map {
height: 400px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
Latitude <input type="text" id="la" name="latitude" value="28.39"> Longitude<input type="text" id="lo" name="longitude" value="84.12">
<!--Google Map API Link-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap">
Please Use jQuery at the head