Extract Coordinates Of Google Map Point To Google Sheets In Html
First question So i'm getting started with HTML/JS and i'm having trouble extracting the coordinates of a marker placed by the user and putting them into a spreadsheet. As it stand
Solution 1:
in console there was error Uncaught TypeError: Illegal invocation
after hitting submit. So add cache: false,processData: false, in ajax function
functionpostContactToGoogle() {
var frmdata = $('#formRequest').serialize();
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse",
data: frmdata,
type: "POST",
dataType: "xml",
cache: false,
processData: false,
statusCode: {
0: function() {
alert('success')
//window.location.replace("CoordsfromPoint.html");
},
200: function() {
//window.location.replace("CoordsfromPoint.html");
}
}
});
}
Check this and comment still there any error
Update :
I updated the form with form id and updated the input fields with the name matching with the form input field name. And for ajax post i am serializing the form input value to get posted as data.
form
<formid="formRequest">
Latitude:
<br/><inputtype="text"name="entry.149945546"id="latitude"placeholder="latitude" /><br/> Longitude:
<br/><inputtype="text"name="entry.760486044"id="longitude"maxlength="10"placeholder="longitude" /><br/> Description:
<br/><textareaname="entry.573971734"id="description"rows="4"cols="40"placeholder="Write your query here..."></textarea><br/><br/><center><inputtype="button"name="Submit"id="Submit"onclick="postContactToGoogle()"value="Submit" /><inputtype="reset"value="Reset" /></center></form>Note if you want to have all form input you can update the from with the input fields matching the google form
Whole plunker code
<!--http://gis.stackexchange.com/questions/33238/how-do-you-get-the-
coordinates-from-a-click-or-drag-event-in-the-google-maps-api--><html><head><metaname="viewport"content="initial-scale=1.0, user-scalable=no" /><scripttype="text/javascript"src="https://maps.google.com/maps/api/js?sensor=false"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scripttype="text/javascript">var geocoder = new google.maps.Geocoder();
functiongeocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
functionupdateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
functionupdateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
functiongetPoint_Lat(latLng) {
document.getElementById('pointLat').innerHTML = [
latLng.lat()
];
document.getElementById('latitude').value=[
latLng.lat()
];
}
functiongetPoint_Lng(latLng) {
document.getElementById('pointLng').innerHTML = [
latLng.lng()
];
longitude = [latLng.lng()];
document.getElementById('longitude').value=[
latLng.lng()
];
}
functionupdateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
functioninitialize() {
var latLng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.updateMarkerPosition(latLng);
geocodePosition(latLng);
// 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());
getPoint_Lat(marker.getPosition());
getPoint_Lng(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
functionpostContactToGoogle() {
var frmdata= $('#formRequest').serialize();
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSccwx1JnSaptL1JlXy-Jmr2S9NjkisKRsmj0pt_4E6bATYVdA/formResponse",
data: frmdata,
type: "POST",
dataType: "xml",
cache: false,
processData: false,
statusCode: {
0: function() {
alert('success')
//window.location.replace("CoordsfromPoint.html");
},
200: function() {
//window.location.replace("CoordsfromPoint.html");
}
}
});
}
</script></head><body><style>#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPaneldiv {
margin-bottom: 5px;
}
</style><divid="mapCanvas"></div><divid="infoPanel"><b>Marker status:</b><divid="markerStatus"><i>Click and drag the marker.</i></div><b>Current position:</b><divid="info"></div><b>Latitude</b><divid="pointLat"></div><b>Longitude</b><divid="pointLng"></div><b>Closest matching address:</b><divid="address"></div></div><tableclass="FormRequest"align="left"><tr><td><formid="formRequest">
Latitude:
<br/><inputtype="text"name="entry.149945546"id="latitude"placeholder="latitude"readonly /><br/> Longitude:
<br/><inputtype="text"name="entry.760486044"id="longitude"maxlength="10"placeholder="longitude"readonly/><br/> Description:
<br/><textareaname="entry.573971734"id="description"rows="4"cols="40"placeholder="Write your query here..."></textarea><br/><br/><center><inputtype="button"name="Submit"id="Submit"onclick="postContactToGoogle()"value="Submit" /><inputtype="reset"value="Reset" /></center></form></td></td></table></body></html>
Post a Comment for "Extract Coordinates Of Google Map Point To Google Sheets In Html"