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

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more