Since from 2 months I am trying to implement google maps.But still am not done with it.
Question 1,Question 2,Question 3 were my previous doubts.
After a long research I got to know that:-
"Google accepts only 10 requests/sec.If it receives more, then it generates a status 'OVER QUERY LIMIT'.Solutions are to buy that API(not sure about it completely) OR Generate a key with Google Maps which will accept 25000 req/day(Suitable for my requirement)".
Now I have a key.The issue is "It's usage".
Code snippet:
1.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
This gives an alert:
"The provided Google API key is invalid or this site is not authorized to use it"
2.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
Usage of sensor removes the alert but it still gives the status 'OVER QUERY LIMIT'.
As mentioned here I've tried editing the credentials and all but nothing works out.
Working fiddle
Kindly help me out in solving this. If possible give any direct steps, instead of so many links and indirect instruction/comments.
Thank you
I think I should stop using SO...
This answer is for the beginners like me.
1.No need of sensor in Google API V3
2.Use browser key like this - <script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
3.In Edit allowed references under credentials give the complete path.
Explained in this Answer
Related
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
I am trying to call the Math.matrix() function, and I am quite certain I am not importing the file correctly into my javascript code. I have read through the StackOverflow question "how to include and use math.js": and given that advice, I have the following :
<HTML >
<!DOCTYPE html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.1/math.js>
</script>
<script type="text/javascript" >
function rotate_clockwise(){
/* code skipped */
matrix = Math.matrix(matrix, rotationmatrix);
}
</script>
</head>
<body>
</body>
</HTML>
where the cdns reference I have taken from this link
But on run when rotate_clockwise is called via slider the chrome 68 debugger states Uncaught type error : Math.matrix is not a function, so I do believe I am not including this file correctly.
My base assumption is that including a file once, in one set of script tags, is enough for any javascript function to use this library, which resides within a different set of script tags.
Thanks so much for any assistance you can provide.
I think you need math.matrix(...)--lower case math since Math is a standard JS library.
I am having difficulty with a specific JQuery $.post call to a PHP-based processor. I created a test page with the code below located here: http://goo.gl/Bg7H2u
Note this is located on a subdomain, but we are not doing cross-domain posting. Everything should be included on the subdomain.
There do not seem to be any JS errors as reported in the error console.
The processor /get-data.html is the general purpose PHP processor, and, if you load the processor page with the right value, it returns a dataset from the MySQL database in JSON format. We have this working on the main domain without issue, and other $.post calls seem to work OK from this subdomain (not to this /get-data.html processor, but other processors that process form content).
See the actual processor output here: http://goo.gl/yOzrm2
I must be missing something obvious, but I am coming up empty. Thoughts?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var prices;
$(document).ready(function(){
$.post( "/get-data.html", { table: 'prices' },
function( data ) {
prices = data;
alert(prices);
}, 'json');
});
</script>
</head>
<body>
<div style="overflow-x: hidden;" id="divMain">
</div>
</body>
</html>
Thanks for any advice you can provide.
If you do View Source on the processor output, you'll see that your script is returning:
<p>{"Basic Plan":["349"],"Basic":["349"],"Premium Plan":["549"],"Premium":["549"],"Standard Plan":["429"],"Standard":["429"],"Bonus Plan":["175"],"Additional Central AC System":["99"],"Additional central heating system":["99"],"Central Vacuum":["99"],"Whole home humidifier":["49"],"Pool (in-ground)":["179"],"Spa (in-ground)":["179"],"Septic System":["99"],"Sump Pump":["99"],"Well pump":["99"],"Whole home water softener":["99"],"Lawn sprinkler system (in-ground)":["99"],"Wine refrigerator":["49"],"Ice maker (free standing)":["49"],"Home phone (unlimited)":["49"],"TV Protection (Flat screen up to 60 inches)":["99"],"PC Protection (laptop or desktop)":["49"]}</p>
There's <p> at the beginning and </p> at the end. This is not valid JSON. You need to fix the server script so that it doesn't print anything other than the JSON (whitespace is OK, that's it).
1.confirm that /get-data.html is the correct relational url for your file location.
If you navigate directly to the /get-data.html, does it produce the results that you are after.
try running the same code without , 'json' and see if it works.
hope this helps
I'm trying to use the Oocharts API to display my Google Analytics Data and everything I've been trying ends up in a white screen. Below is the code I'm using according to their site's examples:
<html>
<head>
</head>
<body>
<h3>With JS</h3>
<div id='chart'></div>
<h3>With HTML Attributes</h3>
<div data-oochart='bar' data-oochart-start-date='30d' data-oochart-metrics='ga:visits,Visits,ga:newVisits,New Visits' data-oochart-dimension='ga:continent' data-oochart-profile='ga:84157823'></div>
<script src='../oocharts.js'></script>
<script type="text/javascript">
window.onload = function(){
oo.setAPIKey("61a7a03dcab1487aa4ba3126f10e275f219d03c6");
oo.load(function(){
var bar = new oo.Bar("ga:84157823", "30d");
bar.addMetric("ga:visits", "Visits");
bar.addMetric("ga:newVisits", "New Visits");
bar.setDimension("ga:continent");
bar.draw('chart');
});
};
</script>
</body>
At the oo.setAPIKey() function I tried both Oocharts Mission Control's API key and the Google Analytics API Key (cause I wasn't so sure which one to use) with the same, empty, results.
Please give me an answer to what I'm doing wrong here cause I'm going crazy. Thank you in advance...
To anyone who might be interested:
At the oo.setAPIKey function you use the API key provided by the Oocharts Mission Control.
At the oo.Bar you use just the number of your profile id, not ga: and then the number.
And of course at the bar.draw('chart') you replace 'chart' with 'bar'.
Hope this will prevent someone (like me) from throwing his head to the wall ;)...
I can't seem to get this working altho it is all on the website. I am not any good at js so that doesn't help either to be honest.
so I have basically done exactly the same as what they have on their website but just doesn't seem to function.
Signup open:<br><input type="text" name="reg_start" class="datepicker" value=""/><br>
Signup closed:<br><input type="text" name="reg_end" class="datepicker" value=""/><br>
This is there code what is the same as mine
<script language="javascript" src="protoplasm.js"></script>
<script language="javascript">
// transform() calls can be chained together
Protoplasm.use('datepicker')
.transform('input.datepicker')
.transform('input.datepicker_es', { 'locale': 'es_AR' });
</script>
Here are the includes I am doing
<link rel="stylesheet" href="jquery/datepicker/datepicker.css">
<script src="jquery/protoplasm.js"></script>
<script src="jquery/datepicker/datepicker_src.js"></script>
<script src="jquery/datepicker/datepicker.js"></script>
Here is the website I got the datepicker from
http://jongsma.org/software/protoplasm/control/datepicker
I understand that in their code they do not have the extra src includes but I put these in when I have been trying to get it working. I left them in the code as I think I will need to include them but not 100% as once again js isn't my strongest point because I am new to coding and need to get a lot more learning in js.
If anyone could help me out on how to get this working that would be great and I would appreciate any sort of help that you may be able to provide.
Thanks for reading
I managed to solve this problem I was having. What I done was I ended up putting the datepickers into .php file and then included it into my form. I added the js and css includes into this file as well and everything seems to work.
below I have included the link to the timepick I used and also my form, php include and the php what is needed to sort the date before sending to the database. If anyone finds this answer useful then please hit the +1 button.
Below is the link to jquery where I got the date and time picker from. The version I downloaded was 2.1.8 and you should be able to see the download button in right corner and it is a orange button.
http://plugins.jquery.com/datetimepicker/
Below is the .php file. I called it regend.php all of the jquery and css is included in the link above.
<link rel="stylesheet" type="text/css" href="jquery/master/jquery.datetimepicker.css"/>
<input type="text" value="date/time" id="regend" name="reg_end"/>
<script src="jquery/master/jquery.js"></script>
<script src="jquery/master/jquery.datetimepicker.js"></script>
<script>
$('#regend').datetimepicker();
$('#regend').datetimepicker({value:'date/time',step:10});
</script>
Below is the include that I added to my form. I added this within <form>.......</form>. I added it to the location I wished it to be displayed.
Signup close:<?php include("indexmodules/regend.php");?><br><br>
Below is the php code that I used before i sent it to the database to be saved.
$reg_end = preg_replace('#[^0-9]#i', '', $_POST ['reg_end']);
$unix_time = strtotime($reg_end);
$date2 = date("Y-m-d H:i:s",$unix_time);
All of the above code should help out any new beginner who is trying to get a date picker working on their website. If I enhance this code I will also post the updated version or version below this.
Thank you to the guys who commented on my original post and I hope this helps people out in the future.