javascript - Drop a marker where clicked and display the co-ordinates and address -
i'm noob who's written js code google maps , facing problems.
what i'm trying achieve:-
- when page loads, picks location. when click on map, drops marker.
- when click somewhere else, drops same marker on different location now.
- gets co-ords of place , displays in text box.
- conversely, add location in address bar , if present, drops marker location , gets co-ords.
problems facing:
- the map drops new marker everytime click on map.
- doesn't co-ords of location.
- does not search address.
my limitations:
- noob
- cannot figure out code search address bar.
please point me in right direction.
here's code
function initmap() { var map = new google.maps.map(document.getelementbyid('map'), { zoom: 8, center: {lat: 40.731, lng: -73.997} }); google.maps.event.addlistener(map, 'click', function(e) { placemarker(e.latlng, map); }); function placemarker(latlng, map) { var marker = new google.maps.marker({ position: latlng, map: map }); map.panto(latlng); } var geocoder = new google.maps.geocoder; var infowindow = new google.maps.infowindow; document.getelementbyid('submit').addeventlistener('click', function() { geocodelatlng(geocoder, map, infowindow); }); } function geocodelatlng(geocoder, map, infowindow) { var input = document.getelementbyid('latlng').value; var latlngstr = input.split(',', 2); var latlng = {lat: parsefloat(latlngstr[0]), lng: parsefloat(latlngstr[1])}; geocoder.geocode({'location': latlng}, function(results, status) { if (status === google.maps.geocoderstatus.ok) { if (results[1]) { map.setzoom(11); var marker = new google.maps.marker({ position: latlng, map: map }); infowindow.setcontent(results[1].formatted_address); infowindow.open(map, marker); } else { window.alert('no results found'); } } else { window.alert('geocoder failed due to: ' + status); } }); }html, body, #map { width:100%; height:100%; }<script src="https://maps.googleapis.com/maps/api/js?callback=initmap" async defer></script> <div id="floating-panel"> <input id="latlng" type="text" value="40.714224,-73.961452"> <input id="submit" type="button" value="reverse geocode"> </div> <div id="map"></div>
create marker in initmap function, omit map property, can add in click event handler. update position each time. e.g.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } </style> <script src="https://maps.googleapis.com/maps/api/js?"></script> <script> function initialize() { var map = new google.maps.map(document.getelementbyid('map'), { zoom: 8, center: {lat: 40.731, lng: -73.997} }); var marker = new google.maps.marker({ position: {lat: 0, lng: 0} }); google.maps.event.addlistener(map, 'click', function(e) { placemarker(e.latlng, map, marker); }); } function placemarker(latlng, map, marker) { marker.setposition(latlng); marker.setmap(map); map.panto(latlng); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map"></div> </body> </html> 
Comments
Post a Comment