I am coding a form with location pickup and drop off. It works fine on tryit editor but it gives following error when it goes live.
Google Maps API error: InvalidKeyMapError
Also the form doesn't send any information on my email when pressing submit button. The coding is as follows, can some one suggest a fix?
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeLehCRbkcg19L4j45Y4EtWESRj3uMksensor=false&libraries=places">
</script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('collapseOne');
var options = {componentRestrictions: {country: 'uk'}};
new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('collapsetwo');
var options = {componentRestrictions: {country: 'uk'}};
new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form action="mailto:ezy#gmail.com" method="post" name="bform" onsubmit="return valBF();">
<input type="hidden" name="BOOK" value="GO" />
<fieldset>
<ul>
<li>
<label class="placepicker form-control"></label> <input id="collapseOne" placeholder="Pickup address" >
</li>
<li> <label for="placepicker form-control"></label><input id="collapsetwo" placeholder="Dropoff address"></li>
<li><input type="button" name="sendinfo" id="sendinfo" value="Submit" "></li>
</ul>
</fieldset>
</form>
</body>
</html>
If there are any relevant examples please do let me know.
Related
I have a javascript at my server end. In that script after some functions are run i am getting a value which is particularly path of websocket.I am setting that path as an attribute of javascript object.That javascript object is a chat popup whose html exists on my website.
myscript.js
//----------some_exisiting_code-----------
var ws_path = "ws://some-ip-address/chat/id/" //This path is just an example.The path will be calculated dynamically by above existing lines of code.
$(".chat-popup").attr("path",ws_path);
//----------some_exisiting_code-----------
mypage.html
//Importing myscript.js from server
<script src="http://my-server-address/static/myscript.js"></script>
// passing value of "path" attribute as websocket endpoint
<script>
var endpoint = $(".chat-popup").attr("path");
var socket = new ReconnectingWebSocket(endpoint);
</script>
<div class="chat-popup">
<div class="chat-history">
<ul id='chat-items'></ul>
</div>
<div class="message">
<!------------Message to be sent----------------------->
<form id='form' method='POST'>
<input type="hidden" name="">
<input id="id_message" type="text">
<input type='submit' class='btn btn-primary'/>
</form>
<!------------------------------------------------------------------>
</div></div>
I am getting error:endpoint is undefined.
How can i solve this problem?
You can add your "myscript.js" file in the footer of the page. and you can also add "jquery.min.js" file.
myscript.js
//----------some_exisiting_code-----------
var ws_path = "ws://some-ip-address/chat/id/" //This path is just an example.The path will be calculated dynamically by above existing lines of code.
//alert(ws_path);
$(".chat-popup").attr("path",ws_path);
//----------some_exisiting_code-----------
mypage.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="chat-popup">
<div class="chat-history">
<ul id='chat-items'></ul>
</div>
<div class="message">
<!------------Message to be sent----------------------->
<form id='form' method='POST'>
<input type="hidden" name="">
<input id="id_message" type="text">
<input type='submit' class='btn btn-primary'/>
</form>
<!------------------------------------------------------------------>
</div>
</div>
</body>
</html>
<script src="myscript.js"></script>
<script>
$( document ).ready(function() {
var endpoint = $(".chat-popup").attr("path");
alert(endpoint);
var socket = new ReconnectingWebSocket(endpoint);
});
</script>
In my HTML I added
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>
and in my Javascript I've added
function initialize() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
where location is the ID of my searchbox. When I try to type in a value, there's just a gray exclamation mark at the top and it doesn't allow me to type anything more than one letter.
You can use following example.
function initialize() {
new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
types: ['geocode']
});
}
initialize();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>
Here is a snippet example:
function initialize() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDR924KH0p6IDMCsOaG5rMmEo17JSl5K2U&libraries=places"></script>
<script type="text/javascript" src=""></script><!-- ← link to javascript file-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>Location:</div>
<input type="text" id="location" name="location" value="" autocomplete="off" />
</body>
</html>
Note:
It took some time for the API key to be valid but once the API connection works the page will work as well. You might need to refresh the page a few times though as it seems that the API key was having problems connecting at first.
Source: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
I am learning to use Google Geolocation API. I have got my key and I am just trying to make a simple form which takes the city name and returns me the latitude and longitude using Geolocation API.
The simple form is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<fieldset>
<ul>
<li>
<label for="city-search">City Name</label>
<input type="text" id="city-search" placeholder="e.g. Rochester, NY">
</li>
</ul>
</fieldset>
<input type="button" id="sub" value="Submit" onclick="geolocation()">
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="geolocation.js"></script>
</body>
</html>
Can anyone tell me how to use the Geolocation API in a way that I can retrieve the latitude and longitude of the entered city.
Daily limit without API Key is 2500. You can read my question - Where to place API key for Google Geocoding API?
If you just use Geocoding on client browser, you do not need Google API Key. You can still pass the key if your client is a heavy user and you want to pay on behalf of your client.
Here is the working demo - https://jsfiddle.net/uj5qcqx0/
$(function() {
$('#sub').click(function() {
var city = $('#city-search').val();
if (city.length) {
var url = "https://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + city;
$.get(url, function(data) {
$("#result").text(JSON.stringify(data));
});
} else {
alert("Please enter city.");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="city-search">City Name</label>
<input type="text" id="city-search" placeholder="e.g. Rochester, NY">
<input type="button" id="sub" value="Submit">
<div id="result"></div>
This is my first attempt to write anything in javascript, although this does exactly as intended, I am sure it can be done simpler. Not that this script is all that useful, just an exercise in learning something new. I was also trying not to use the evil document write.
So what is the more elegant way of doing this?
<html>
<body>
<input name="abc" type="text" id="foo">
<button onclick="AddInputValue()">Submit</button>
<p id="displayURL"></p>
<script>
function AddInputValue(){
var domain = "http://site.com?abc="
var qstring = document.getElementById("foo").value;
document.getElementById("displayURL").innerHTML=domain + qstring;
}
</script>
</body>
</html>
If you use jQuery:
<html>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form id="form1">
<input name="abc" type="text" id="foo">
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://site.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body>
</html>
You can even add more form elements and the name of the element will match the query string. http://jsfiddle.net/3muu6/
Just posting the example in http://jsfiddle.net/3muu6/.
Increased the number of inputs. This is basically what Google Analytics URL Builder does, and was the inspiration for this exercise.
<html>
<head>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<form id="form1">
<input name="abc" type="text" id="foo" /><br />
<input name="def" type="text" id="bar" /><br />
<input name="ghi" type="text" id="tar" /><br />
<input name="jkl" type="text" id="boo" /><br />
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://example.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body></html>
Now how to omit a query-string pair when the user leaves an input value blank? Hmm.
I'm doing some geocoding using the google maps API.
The user fill a form with some address, and when the submit button is clicked, a codeAddress() function is called, which is supposed to perform the geocoding, but it does not work.
As a test, I hardcoded the address and call the codeAddress function when the document in an initialize().
When codeAddress is called when the page is ready, it works ok, but when it's called by the onclick script, it doesn't work (no errors returned by firebug!).
Anybody can help?
Thanks
(you can paste the code in here: http://code.google.com/apis/ajax/playground/?exp=maps#map_simple, or change the google api key)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
codeAddress();
}
}
function codeAddress() {
var geocoder = new GClientGeocoder();
var address = "paseo montjuic, 30, barcelona, spain";
geocoder.getLatLng( address, function(point) {
if (point) {
alert(point);
} else {
alert("Geocode was not successful");
}
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<form action="" method="POST">
<!-- stuff -->
<input type="Submit" value="Submit" onclick="codeAddress();" />
</form>
</body>
</html>
Looks to me right after codeAddress(); is called on the onclick event, your POST is done immediately. Thus it looks to you that the code failed, but in fact it is working.
What you can do is:
1) Remove the form, just a button using the onclick event. Example:
<input type="button" value="Submit" onclick="codeAddress();" />
2) Disable submitting form when event onclick hits by adding return false;. Example:
<form action="" method="POST">
<!-- stuff -->
<input type="Submit" value="Submit" onclick="codeAddress();return false;" />
</form>