javascript - move marker and update place in google maps -
i using google maps, , in textfield can type place , see marker on google maps coordinates. can move maker , coordinates in info box updated. how update place name in textfield? thank you.
this jquery script:
var map; function initmap() { var geocoder = new google.maps.geocoder(); var startaddress = $('#form_inp19').val(); geocoder.geocode({ 'address': startaddress }, function (results, status) { if (status === google.maps.geocoderstatus.ok) { startlocationmap = results[0].geometry.location; map = new google.maps.map(document.getelementbyid('map'), { zoom: 12, center: startlocationmap }); geocoder = new google.maps.geocoder(); document.getelementbyid('submit').addeventlistener('click', function () { geocodeaddress(geocoder, map); }); } else { alert('place doesnt exist on map: ' + status); } if (typeof google.maps == 'undefined') { /* custom functions alert user error */ return 0; } }); }//end function initmap $(document).ready(function () { if (typeof google.map == 'undefined') { return 0; } map = new google.maps.map(document.getelementbyid('map'), mapoptions); }); function togglebounce() { if (marker.getanimation() !== null) { marker.setanimation(null); } else { marker.setanimation(google.maps.animation.bounce); } } var marker; var infowindow; function geocodeaddress(geocoder, resultsmap) { if (typeof infowindow != 'undefined') { infowindow.close(); } if (typeof marker != 'undefined') { marker.setmap(null); } var address = document.getelementbyid('address').value; geocoder.geocode({ 'address': address }, function (results, status) { if (status === google.maps.geocoderstatus.ok) { resultsmap.setcenter(results[0].geometry.location); marker = new google.maps.marker({ map: resultsmap, draggable: true, animation: google.maps.animation.drop, position: results[0].geometry.location, title: "drag me!" }); } else { alert('place doesnt exist on map: ' + status); } infowindow = new google.maps.infowindow({ content: '<p>marker location:' + 'lat: ' + marker.getposition().lat().tofixed(6) + ', ' + 'lng: ' + marker.getposition().lng().tofixed(6) + '</p>' }); $(".geolocation_lat ").val(marker.getposition().lat().tofixed(6)) //= marker.getposition().lat().tofixed(6); $(".geolocation_long ").val(marker.getposition().lng().tofixed(6)) google.maps.event.addlistener(marker, 'dragend', function (event) { if (typeof infowindow != 'undefined') { infowindow.close(); } infowindow = new google.maps.infowindow({ content: '<p>marker location:' + 'lat: ' + event.latlng.lat().tofixed(6) + ', ' + 'lng: ' + event.latlng.lng().tofixed(6) + '</p>' }); $(".geolocation_lat ").val(event.latlng.lat().tofixed(6)); //= marker.getposition().lat().tofixed(6); $(".geolocation_long ").val(event.latlng.lng().tofixed(6)); infowindow.open(map, marker); }); infowindow.open(map, marker); google.maps.event.addlistener(marker, 'click', function (event) { if (typeof infowindow != 'undefined') { infowindow.open(map, marker); } }); }); } i have this:
var map; function initmap() { var geocoder = new google.maps.geocoder(); var startaddress = $('#form_inp19').val(); geocoder.geocode({ 'address': startaddress }, function (results, status) { if (status === google.maps.geocoderstatus.ok) { startlocationmap = results[0].geometry.location; map = new google.maps.map(document.getelementbyid('map'), { zoom: 12, center: startlocationmap }); geocoder = new google.maps.geocoder(); document.getelementbyid('submit').addeventlistener('click', function () { geocodeaddress(geocoder, map); }); } else { alert('place doesnt exist on map: ' + status); } if (typeof google.maps == 'undefined') { /* custom functions alert user error */ return 0; } }); }//end function initmap $(document).ready(function () { if (typeof google.map == 'undefined') { return 0; } map = new google.maps.map(document.getelementbyid('map'), mapoptions); }); function togglebounce() { if (marker.getanimation() !== null) { marker.setanimation(null); } else { marker.setanimation(google.maps.animation.bounce); } } var marker; var infowindow; //added function geocodeposition(pos) { geocoder.geocode({ latlng: pos }, function (responses) { if (responses && responses.length > 0) { document.getelementbyid('address') = responses[0].formatted_address; } else { document.getelementbyid('address') = 'cannot determine address @ location.'; } }); } function geocodeaddress(geocoder, resultsmap) { if (typeof infowindow != 'undefined') { infowindow.close(); } if (typeof marker != 'undefined') { marker.setmap(null); } var address = document.getelementbyid('address').value; geocoder.geocode({ 'address': address }, function (results, status) { if (status === google.maps.geocoderstatus.ok) { resultsmap.setcenter(results[0].geometry.location); marker = new google.maps.marker({ map: resultsmap, draggable: true, animation: google.maps.animation.drop, position: results[0].geometry.location, title: "drag me!" }); } else { alert('place doesnt exist on map: ' + status); } infowindow = new google.maps.infowindow({ content: '<p>marker location:' + 'lat: ' + marker.getposition().lat().tofixed(6) + ', ' + 'lng: ' + marker.getposition().lng().tofixed(6) + '</p>' }); $(".geolocation_lat ").val(marker.getposition().lat().tofixed(6)) //= marker.getposition().lat().tofixed(6); $(".geolocation_long ").val(marker.getposition().lng().tofixed(6)) google.maps.event.addlistener(marker, 'dragend', function (event) { geocodeposition(marker.getposition()); if (typeof infowindow != 'undefined') { infowindow.close(); } infowindow = new google.maps.infowindow({ content: '<p>marker location:' + 'lat: ' + event.latlng.lat().tofixed(6) + ', ' + 'lng: ' + event.latlng.lng().tofixed(6) + '</p>' }); $(".geolocation_lat ").val(event.latlng.lat().tofixed(6)); //= marker.getposition().lat().tofixed(6); $(".geolocation_long ").val(event.latlng.lng().tofixed(6)); infowindow.open(map, marker); }); infowindow.open(map, marker); google.maps.event.addlistener(marker, 'click', function (event) { if (typeof infowindow != 'undefined') { infowindow.open(map, marker); } }); }); } but error:
'geocoder' undefined
i error:
cannot assign function result
document.getelementbyid('address') = responses[0].formatted_address; i see address: responses[0].formatted_address "belle van zuylenlaan 23-24, 2642 pijnacker, nederland"
but how place name in textfield?
thank you
in dragend listener,
google.maps.event.addlistener(marker, 'dragend', function() { geocodeposition(marker.getposition()); }); and
function geocodeposition(pos) { geocoder = new google.maps.geocoder(); geocoder.geocode({ latlng: pos }, function(responses) { if (responses && responses.length > 0) { document.getelementbyid('yourtextboxid').value=responses[0].formatted_address; } else { document.getelementbyid('yourtextboxid').value='cannot determine address @ location.'; } }); } here working example (puts address received reverse geocoder in infowindow)
Comments
Post a Comment