Google Map Marker To Show Location In Textbox Rather Than Div Tag
Currently when the map marker is dragged the position is shown in the div tag but I want to show it in the textbox not in the div. I want it int textbox txtLoc. It shows currently
Solution 1:
This is a working version of the code with text box (also) for show the reverse geocode result look at the new version of geocodePosition (the function addAddress() It is no longer necessary)
<body >
<!-- div id="map" style="width: 1800px; height: 1300px"></div-->
<input id="txtLoc" type="text" name="testname" style="width: 400px;"><br>
<div id='msg'>Test</div>
<div id="map"></div>
<script type="text/javascript">
var geocoder;
function initMap() {
geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x=document.getElementById("msg");
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showError(error) {
x=document.getElementById("msg");
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
//updateMarkerPosition(latlon);
//geocodePosition(latlon);
}
function geocodePosition(pos) {
x=document.getElementById("msg");
geocoder.geocode({'latLng': pos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
x.innerHTML = results[0].formatted_address;
y = document.getElementById("txtLoc");
y.value = results[0].formatted_address;
}
} else {
x.innerHTML = "Geocoder non possibile";
}
});
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('map')
var myOptions = {
center: latlon,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions:
{ style: google.maps.NavigationControlStyle.SMALL }
}
var contentString = 'Drag red marker <br/> to improve geo-location';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlon,
map: map,
title: 'Report refers to this location',
draggable: true
});
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function (evt) {
x=document.getElementById("msg");
x.innerHTML = '<p>Dragging ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
});
google.maps.event.addListener(marker, 'drag', function (evt) {
x=document.getElementById("msg");
x.innerHTML = '<p>Dragging ... again .... Marker position: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
});
google.maps.event.addListener(marker, 'dragend', function (evt) {
x=document.getElementById("msg");
x.innerHTML = '<p>Drag .. ended ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
geocodePosition(marker.getPosition());
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer>
</script>
</body>
Post a Comment for "Google Map Marker To Show Location In Textbox Rather Than Div Tag"