I dont' know if anybody is willing to help me out on a bit on Javascript? I am working on a Webapp with Flask.
To get the user info and a googlemaps load I have to use pure Javascript.
This is what I got for my onClick event and it works just fine.
// Google Map initialize
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: 47.2172500, lng: -1.5533600 }
});
document.getElementById('submit').addEventListener('click', function () {
var userQuestion = document.getElementById('userQuestion').value;
requestQuestionMap( map, userQuestion);
});
}
Now I also would like that if the user hits the "enter" key that my function works the same way (sending the user search to my API). I tried some solutions but none seem to work for me. I am probably getting something wrong!
my field for user search in HTML is a classic "input" like this:
<form>
<input type="text" name="question" id="userQuestion" required>
<input type="button" value="Dit moi tout ! " id="submit">
</form>
Of course I did some research here and on google and tried out some solution. none of them seem to fit.
https://stackoverflow.com/a/57226770/5011051
This will help you.
<form onsubmit="return false">
<input type="text"/>
<input type="submit"/>
</form>
or
you can try following prevent from js as well
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: 47.2172500, lng: -1.5533600 }
});
document.getElementById('submit').addEventListener('click', function (e) {
e.preventDefault();
var userQuestion = document.getElementById('userQuestion').value;
requestQuestionMap( map, userQuestion);
});
}
Related
I am a novice at fusion tables and google maps APIs, so hopefully the answer is straight forward! I have used fusion tables to create a map of data points and added a search function.
However, the map only appears briefly before disappearing to be replaced by a "Sorry, something went wrong message". I have reviewed the code and can't work out where the error is.
Please could someone take a look and advise what needs to change?.
Here is the link to the page: https://www.enablie.co.uk/map-test/
My code is:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:800px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.90081096506728, -0.8806991343750425),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE"
},
map: map,
styleId: 2,
templateId: 2
});
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'School Name' CONTAINS IGNORING CASE '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col2",
from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label class="layer-wizard-search-label">
School Name
<input type="text" id="search-string_0">
<input type="button" onclick="changeMap_0()" value="Search">
</label>
</div>
</body>
</html>
Where is your map init with AppId & AppSecret keys ? You must call Google App using this on init of your page (see this Google Map Api JS)
https://developers.google.com/maps/documentation/javascript/examples/map-simple
I've got a project with a django backend that I'm using for logins, and using the mysql DB through my local host. I currently have my gettweets.py script returning an array of coordinates and have a JS script that is supposed to get these results and plot it to google maps api. My JS script fails at $.get. However, if i go to 127.0.0.1/gettweets?tag=%23Pizza, I get something like this:
["-87.634643, 24.396308", "-80.321683, 25.70904", "-79.639319, 43.403221", "-95.774704, 35.995476", "-84.820309, 38.403186", "-120.482386, 34.875868", "-121.385009, 38.716061", "-111.530974, 40.619883"]
I've been trying to get JS to make the call on the button click because I don't think I can get the results to it through Django. Why is it getting stuck?
Here is the JS inside of index.html
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(49.13,-100.32),
mapTypeId: 'roadmap'
});
}
// Loop through the results array and place a marker for each
// set of coordinates.
$('#searchButton').click(function(){
$.get('../../gettweets?tag=%23Trump', function(data, status) {
alert(status);
var data = JSON.parse(this.response);
alert('data');
data.forEach(function(point) {
var coordString = point['coord'];
var x = coordString.substring(0,coordString.indexOf(','));
var y = coordString.substring(coordString.indexOf(',')+1,coordString.length);
console.log(x);
console.log(y);
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(x,y);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
});
window.myLine.update();
});
//xmlhttp = new XMLHttpRequest();
//var tag = document.getElementById('tagSearch').value;
//if (this.readyState === 4 && this.status === 200) {
//}
//xmlhttp.open("GET","./getTweets.php?tag='" + tag + "'");
//xmlhttp.send();
});
</script>
Button/form:
<form>
<input id="tagSearch" type="text" name="tag" maxlength="100" required placeholder="{{ tag }}" />
<button class="btn waves-effect red" type="submit" id="searchButton" name="search">Submit
<i class="material-icons right">send</i>
</button>
</form>
gettweets.py - NOTE I've got this in my views, as well as a separate file. I'm not sure which one I need with the JS
def tweets(request):
tag = request.GET['tag']
print(tag)
x = models.Tweet.objects.filter(tag=tag)
print(x)
coords = []
for i in x:
coords.append(i.coord)
print(coords)
return JsonResponse(coords, safe=False)
Finally, urls
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^gettweets$', views.tweets, name='gettweets'),
]
You're calling $.get() incorrectly. Its signature is $.get(url[, data][, success][, dataType]), from the docs.
I would prefer using a settings object like so:
$.get({
url: '../../gettweets?tag=%23Hillary',
success: function (data, status) {
...
}
});
I am trying to set up a price calculation tool in JS. This is going to calculate amount of kilometers between a set address (business address) and the customer's address, which they can enter into an <input> field.
The script will then round off the amount of kilometers to whole euros (no decimals), and display this as the price (charge of this service is 1 euro per kilometer, so no other calculation required to get the price).
So far I came up with the below code. When I enter this into a .html document in notepad, and open that file with Firefox, it works. However, this needs to be implemented on a Wordpress website.
I put the JS code in the <head> and the rest in the <body> (as shown below). But for some reason it won't work in Wordpress. (on the Wordpress site, as well as the notepad file, I put the script between <script> tags of course)
I tried reading the Wordpress documentation about using JS, and as far as I can see, pasting the code directly into the header is a valid way of making it work (especially for testing purposes) and everything should work, but evidently doesn't. I have also used Google, as well as the Stackoverflow search to try and find an answer, but was obviously unsuccessful.
All help would be greatly appreciated!
The website on which it should be, but isn't, working is: http://www.aircostadskanaal.nl/haal-en-breng-service/
The <head>:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: melbourne
}
}
function calcRoute() {
var start = "Ceresstraat 11, Stadskanaal, Netherlands";
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = Math.round(response.routes[0].legs[0].distance.value / 1000);
}
});
}
The <body>:
<body onload="initialize()">
<div>
<p>
<!--<label for="start">Start: </label>
//<input type="text" name="start" id="start" />-->
<label for="end">Adres: </label>
<input type="text" name="end" id="end" />
<input type="submit" value="OK" onclick="calcRoute()" />
</p>
<p>
<label for="distance">Prijs (€): </label>
<input type="text" name="distance" id="distance" readonly="true" />
</p>
</div>
edit; removed line to set map as I decided not to include the map on the website. This has not fixed the problem unfortunately.
The line map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); in function initialize is referencing element with id="map_canvas" but I can't see it in the markup. Did you by any chance forget it?
Found the answer myself. Thanks everyone for your input
The issue was directionsDisplay = new google.maps.DirectionsRenderer(); which was defined as a variable in function initialize(), but also used in function calcRoute().
I defined it as a global variable, and now the script works.
I have a html file on my website domain (devodeliver.co.uk) which calls on my API Key with the code.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>
In the Developers Console I have tried adding every combination of my domain URL as you can see below
But when I load my site it shows the map for a millisecond then returns with the error "Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error_.bb # MY-KEY:32" - basically saying I haven't given my website permission to access that API Key. But even if I don't set any referrers, it come back with the same error message. I've also waited way over 5 minutes for the API to take affect. Please, what am I doing wrong?! I've spent almost 16 hours trying to figure this out & I can't seem to for the life of me. HELPPPP!
Full HTML code:
<html>
<head>
<style type="text/css">
#map
{
height:400px;
width:400px;
display:block;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7-LTLEupUWBJBWl1GpOWPwkMvxzf8itQ"></script>
<script type="text/javascript">
function getPosition(callback) {
var geocoder = new google.maps.Geocoder();
var postcode = document.getElementById("postcode").value;
geocoder.geocode({'address': postcode}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
callback({
latt: results[0].geometry.location.lat(),
long: results[0].geometry.location.lng()
});
}
});
}
function setup_map(latitude, longitude) {
var _position = { lat: latitude, lng: longitude};
var mapOptions = {
zoom: 16,
center: _position
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: mapOptions.center,
map: map
});
}
window.onload = function() {
setup_map(51.5073509, -0.12775829999998223);
document.getElementById("form").onsubmit = function() {
getPosition(function(position){
var text = document.getElementById("text")
text.innerHTML = "Marker position: { Longitude: "+position.long+ ", Latitude:"+position.latt+" }";
setup_map(position.latt, position.long);
});
}
}
</script>
</head>
<body>
<form action="javascript:void(0)" id="form">
<input type="text" id="postcode" placeholder="Enter a postcode">
<input type="submit" value="Show me"/>
</form>
<div id="map"></div>
<div id="text"></div>
</body>
</html>
Here, when I tested it, it gives me the error "Google Maps API error: ApiNotActivatedMapError" on the JS console.
Take a look for this issue on: https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes
When you use a library or service via the Maps-Javascript-API, and use a key, you need to activate the Google Maps JavaScript API .
Make sure to activate the Google Maps JavaScript API for your project.
Also,
take a look on this other topic about Enable the Google Maps Jvascript API: Google Map error: InvalidKeyOrUnauthorizedURLMapError
I am having problems embedding my query from google fusion into google sites. I have created the query and it works as a html file that has been saves in notepad, but when I go to put it in my Google Sites website it does not work.
The Query code is:
<html>
<head>
<style>
#map-canvas { width:850px; height:650px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(43.89591323557617, -79.77653503417969),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1eMaZWdi5QhF1252KH2e7xOiNyJoBFOzpStMP-Ks'
},
map: map,
styleId: -1,
templateId: -1
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col2'",
from: '1eMaZWdi5QhF1252KH2e7xOiNyJoBFOzpStMP-Ks',
where: "'description' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Land use:</label><input type="text" id="search-string-l0">
<input type="button" onclick="changeMapl0()" value="Search">
</div>
</body>
Have you tried using Google Gadgets to get your code to work in Sites? That is, put the code into a Google Gadget, and then adding the Gadget to your Sites Page via the Insert Menu in the Editor).
Start here, if you have not already:
https://developers.google.com/gadgets/
Another option is to use the HTML box, or making an Apps Script.