javascript - How to put coordinates from google map to input field? -
i'm trying put markers coordinates input field don't know how ;( example here: https://skni.org/map.html coordinates in variable:
var infowindow = new google.maps.infowindow({ content: '' + marker.getposition() + '' i able put couple markers on map , coordinates values should go input field can send them database
my code: script.js
// in following example, markers appear when user clicks on map. // markers stored in array. // user can click option hide, show or delete markers. var map; var markers = []; window.initmap = function(){ var haightashbury = {lat: 52.131514, lng: 20.913248}; map = new google.maps.map(document.getelementbyid('map'), { zoom: 17, center: haightashbury, maptypeid: 'satellite' }); // event listener call addmarker() when map clicked. map.addlistener('click', function(event) { addmarker(event.latlng); }); // adds marker @ center of map. addmarker(haightashbury); } // adds marker map , push array. function addmarker(latlng) { var marker = new google.maps.marker({ position: latlng, map: map, title: 'set lat/lon values property', draggable: true }); var infowindow = new google.maps.infowindow({ content: '' + marker.getposition() + '' }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map, marker); }); markers.push(marker); } // sets map on markers in array. function setmaponall(map) { (var = 0; < markers.length; i++) { markers[i].setmap(map); } } // removes markers map, keeps them in array. function clearmarkers() { setmaponall(null); } // shows markers in array. function showmarkers() { setmaponall(map); } // deletes markers in array removing references them. function deletemarkers() { clearmarkers(); markers = []; } html code:
<!doctype html> <html> <head> <title>remove markers</title> <style> /* set map height explicitly define size of div * element contains map. */ #map { height: 100%; } /* optional: makes sample page fill window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'roboto','sans-serif'; line-height: 30px; padding-left: 10px; } </style> </head> <body> <div id="floating-panel"> <form action="/action_page.php"> coordinates:<br> <input type="text" name="coordinates" size="55" value="how coordinates info window after clicking on markers?"> <br> <input type="submit" value="submit"> </form> <br /> <input onclick="clearmarkers();" type=button value="hide markers"> <input onclick="showmarkers();" type=button value="show markers"> <input onclick="deletemarkers();" type=button value="delete markers"> </div> <div id="map"></div> <p>click on map add markers geocoorditanes.</p> <div id="map-canvas"> </div> <script src="script.js" ></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initmap"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> </body> </html>
append addmarker() function:
var allcoordinates = []; markers.foreach(function(marker){ allcoordinates.push(marker.getposition().lat() + "," + marker.getposition().lng()); }) $("input[name=coordinates]").val(allcoordinates); of course should change format of coordinates need , can refactored more efficient.
Comments
Post a Comment