html - marker should point to location and if user drags the marker the location should be in textbox -
i new google maps. have gone through many posts didnt find wanted. want achieve this: improve-my-city
but able user location , drag marker. want marker move position entered on map on button click vice versa when user drags marker address should in textbox. infowindow not show.
as working asp.net html page different , map shows in iframe on aspx page. textbox , button in .aspx page
<div id="map"></div> <script> function initmap() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showposition, showerror); } else { x.innerhtml = "geolocation not supported browser."; } function showerror(error) { switch (error.code) { case error.permission_denied: x.innerhtml = "user denied request geolocation." break; case error.position_unavailable: x.innerhtml = "location information unavailable." break; case error.timeout: x.innerhtml = "the request user location timed out." break; case error.unknown_error: x.innerhtml = "an unknown error occurred." break; } } updatemarkerposition(latlon); geocodeposition(latlon); } 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/> 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 location', draggable: true }); // add dragging event listeners. google.maps.event.addlistener(marker, 'dragstart', function () { updatemarkeraddress('dragging...'); }); google.maps.event.addlistener(marker, 'drag', function () { updatemarkerstatus('dragging...'); updatemarkerposition(marker.getposition()); }); google.maps.event.addlistener(marker, 'dragend', function () { updatemarkerstatus('drag ended'); geocodeposition(marker.getposition()); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=initmap" async defer> </script>
this sample show address of position of marker when drag end.
this should enough understand how reverse geocoding work (get address coordinates of point)
<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 not supported browser."; } function showerror(error) { x=document.getelementbyid("msg"); switch (error.code) { case error.permission_denied: x.innerhtml = "user denied request geolocation." break; case error.position_unavailable: x.innerhtml = "location information unavailable." break; case error.timeout: x.innerhtml = "the request 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; } } 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/> 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 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>
Comments
Post a Comment