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><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">
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments