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
function postContactToGoogle() {
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
<form id="formRequest">
Latitude:
<br/>
<input type="text" name="entry.149945546" id="latitude" placeholder="latitude" />
<br/> Longitude:
<br/>
<input type="text" name="entry.760486044" id="longitude" maxlength="10" placeholder="longitude" />
<br/> Description:
<br/>
<textarea name="entry.573971734" id="description" rows="4" cols="40" placeholder="Write your query here..."></textarea>
<br/>
<br/>
<center>
<input type="button" name="Submit" id="Submit" onclick="postContactToGoogle()" value="Submit" />
<input type="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>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(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.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function getPoint_Lat(latLng) {
document.getElementById('pointLat').innerHTML = [
latLng.lat()
];
document.getElementById('latitude').value=[
latLng.lat()
];
}
function getPoint_Lng(latLng) {
document.getElementById('pointLng').innerHTML = [
latLng.lng()
];
longitude = [latLng.lng()];
document.getElementById('longitude').value=[
latLng.lng()
];
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
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);
function postContactToGoogle() {
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;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Latitude</b>
<div id="pointLat"></div>
<b>Longitude</b>
<div id="pointLng"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
<table class="FormRequest" align="left">
<tr>
<td>
<form id="formRequest">
Latitude:
<br/>
<input type="text" name="entry.149945546" id="latitude" placeholder="latitude" readonly />
<br/> Longitude:
<br/>
<input type="text" name="entry.760486044" id="longitude" maxlength="10" placeholder="longitude" readonly/>
<br/> Description:
<br/>
<textarea name="entry.573971734" id="description" rows="4" cols="40" placeholder="Write your query here..."></textarea>
<br/>
<br/>
<center>
<input type="button" name="Submit" id="Submit" onclick="postContactToGoogle()" value="Submit" />
<input type="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"