How to get coordinates from drag event marker with geocode google maps functions

المشرف العام

Administrator
طاقم الإدارة
I have a code that use google maps with some functions but i'm not able to get coordinates from a drag event with a draggable marker I have tried to insert without success:

draggable:truegoogle.maps.event.addListener(marker, 'drag', function(event) { console.debug('new position is '+event.latLng.lat()+' / '+event.latLng.lng()); });google.maps.event.addListener(marker, 'dragend', function(event) { console.debug('final position is '+event.latLng.lat()+' / '+event.latLng.lng()); });this is my code:

function getLatLng() { var geocoder = new google.maps.Geocoder(); var address = document.getElementById('address2').value; var input = document.getElementById('address2'); var options = { types: [], };var autocomplete = new google.maps.places.Autocomplete(input, options); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var latLng = results[0].geometry.location; $('#lat').val(results[0].geometry.location.lat()); $('#lng').val(results[0].geometry.location.lng()); } else { alert("Geocode was not successful for the following reason: " + status); } });}function getLatLng2() { var geocoder = new google.maps.Geocoder(); var e = document.getElementById('city');var address = e.options[e.selectedIndex].text; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var latLng = results[0].geometry.location; $('#lat').val(results[0].geometry.location.lat()); $('#lng').val(results[0].geometry.location.lng()); } else { alert("Geocode was not successful for the following reason: " + status); } });}function getLatLng3() { var geocoder = new google.maps.Geocoder(); var e = document.getElementById('region');var address = e.options[e.selectedIndex].text; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var latLng = results[0].geometry.location; $('#lat').val(results[0].geometry.location.lat()); $('#lng').val(results[0].geometry.location.lng()); } else { alert("Geocode was not successful for the following reason: " + status); } });}function getLatLng4() { var geocoder = new google.maps.Geocoder(); var e = document.getElementById('province');var address = e.options[e.selectedIndex].text; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var latLng = results[0].geometry.location; $('#lat').val(results[0].geometry.location.lat()); $('#lng').val(results[0].geometry.location.lng()); } else { alert("Geocode was not successful for the following reason: " + status); } });}function getLatLng5() { var geocoder = new google.maps.Geocoder(); var e = document.getElementById('country');var address = e.options[e.selectedIndex].text; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var latLng = results[0].geometry.location; $('#lat').val(results[0].geometry.location.lat()); $('#lng').val(results[0].geometry.location.lng()); } else { alert("Geocode was not successful for the following reason: " + status); } });}function getLatLng6() { var geocoder = new google.maps.Geocoder(); var e = document.getElementById('continent');var address = e.options[e.selectedIndex].text; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var latLng = results[0].geometry.location; $('#lat').val(results[0].geometry.location.lat()); $('#lng').val(results[0].geometry.location.lng()); } else { alert("Geocode was not successful for the following reason: " + status); } });}//var whos = null;var placedata = [];var geocoder = new google.maps.Geocoder();var map;function getplaces(gid, src) { if ( !! placedata[gid]) { map.setCenter({ lat: parseFloat(placedata[gid].lat), lng: parseFloat(placedata[gid].lng) }); switch (src) { case "continent": map.setZoom(3); break; case "country": map.setZoom(5); break; case "province": map.setZoom(6); break; case "region": map.setZoom(7); break; case "city": map.setZoom(8); break; } codeAddress(placedata[gid].name); } whos = src; // var request = "http://ws.geonames.org/childrenJSON?geonameId="+gid+"&callback=getLocation&style=long"; var request = "http://www.geonames.org/childrenJSON?geonameId=" + gid + "&callback=listPlaces&style=long"; aObj = new JSONscriptRequest(request); aObj.buildScriptTag(); aObj.addScriptTag();}function listPlaces(jData) { counts = jData.geonames.length < jData.totalResultsCount ? jData.geonames.length : jData.totalResultsCount; who = document.getElementById(whos); who.options.length = 0; if (counts) who.options[who.options.length] = new Option('Select', ''); else who.options[who.options.length] = new Option('No Data Available', 'NULL'); for (var i = 0; i < counts; i++) { who.options[who.options.length] = new Option(jData.geonames.name, jData.geonames.geonameId); placedata[jData.geonames.geonameId] = jData.geonames; } delete jData; jData = null;}function zoomto(gid) { if ( !! placedata[gid]) { map.setCenter({ lat: parseFloat(placedata[gid].lat), lng: parseFloat(placedata[gid].lng) }); map.setZoom(14); }}function codeAddress(address) { geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (!!results && !!results[0] && !!results[0].geometry && !!results[0].geometry.viewport) { map.fitBounds(results[0].geometry.viewport); } else if (!!results && !!results[0] && !!results[0].geometry && !!results.geometry.bounds) { map.fitBounds(results[0].geometry.bounds); } else { map.setCenter(results[0].geometry.location); } var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } });}function codeAddress2() { var address = document.getElementById('address2').value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } });}window.onload = function () { getplaces(6295630, 'continent'); map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 3, center: { lat: 0, lng: 0 } });};html:


*Select area Continent:

Country:

State / Provice:

County / Region:

City:



you can find my demo here:http://jsfiddle.net/njDvn/214/

Thanks



أكثر...
 
أعلى