I am trying to display a successful message once the form gets sent:
$('emeraldForm').addEvent('submit', function(){
onSuccess: function(){
alert('df');
}
});
Related
So I have a map and when user clicks on any marker I want to get a json. All variables have a value and when I manually put them in browser I get an response. At the moment I get:
XMLHttpRequest cannot load
https://maps.googleapis.com/maps/api/directions/json?origin=53.5411328&-2.1114581&destination=53.54027.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'my url of course' is therefore not allowed
access.
And the link looks like this:
https://maps.googleapis.com/maps/api/directions/json?origin=53.541111&-2.1114894&destination=53.54027
while it should be:
https://maps.googleapis.com/maps/api/directions/json?origin=53.541111,-2.1114894&destination=53.54027,-2.1121799&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65
Code:
marker.addListener('click', function() {
var destinationLat = marker.getPosition().lat();
var destinationLng = marker.getPosition().lng();
console.log(lat);
console.log(lng);
console.log(destinationLng);
console.log(destinationLat);
var test = $.getJSON('https://maps.googleapis.com/maps/api/directions/json?origin='+lat+'',''+lng+'&destination='+destinationLat+'',''+destinationLng+'&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65', function(data) {
console.log(test);
});
console.log(test);
});
}
The mistake's in this line:
var test = $.getJSON('https://maps.googleapis.com/maps/api/directions/json?origin='+lat+'',''+lng+'&destination='+destinationLat+'',''+destinationLng+'&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65', function(data) {
That should be:
var test = $.getJSON('https://maps.googleapis.com/maps/api/directions/json?origin='+lat+','+lng+'&destination='+destinationLat+','+destinationLng+'&key=AIzaSyAirYgs4Xnt9QabG9v56jsIcCNfNZazq65', function(data) {
In order to avoid the CORS headers issue in your JavaScript code you should use a built-in Directions service of Maps JavaScript API.
https://developers.google.com/maps/documentation/javascript/directions
Replace your AJAX call with something similar to
directionsService.route({
origin: new google.maps.LatLng(lat,lng),
destination: new google.maps.LatLng(destinationLat,destinationLng),
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
//Process response here
} else {
window.alert('Directions request failed due to ' + status);
}
});
Take a look at examples
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
I hope this helps!
This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 8 years ago.
I want to display content into InfoWindow from controller action (return partial view). When i click Mraker it shows 'Undefined' into infowindow.
How to render partial view into google map InfoWindow?
function AjaxDisplayString() {
var addressData;
var testData;
$.ajax({
type: "GET",
url: '/Account/Tooltip',
dataType: "HTML",
contentType: 'application/json',
traditional: true,
data: addressData,
success: function (result) {
debugger;
return result
},
error: function (arg) {
alert("Error");
}
});
}
var infowindow = new google.maps.InfoWindow({
content: "<div>"+ AjaxDisplayString() + "</div>"
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
AjaxDisplayString is ajax call hence result arrives little late but you tend to open infowindow immediately. Modify the calls as below and it shall work.
var infowindow = new google.maps.InfoWindow({
content: "";
});
function AjaxDisplayString() {
var addressData;
var testData;
$.ajax({
type: "GET",
url: '/Account/Tooltip',
dataType: "HTML",
contentType: 'application/json',
traditional: true,
data: addressData,
success: function (result) {
debugger;
infowindow.setContent("<div>"+ result + "</div>");
infowindow.open(map, marker);
},
error: function (arg) {
alert("Error");
}
});
}
google.maps.event.addListener(marker, 'click', function () {
AjaxDisplayString(map, marker)
});
I am trying to load a GeoJSON to the google maps javascript api and then process the GeoJSON by calling map.data.forEach . I cant get the map.data.forEach function to work it seems that it is never called.
The GeoJSON gets loaded fine and is displayed on my map.
Any suggestions why map.data.forEach would not work here?
Here is my code:
var myMap;
function initialize() {
// Create a simple map.
myMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {
lat: 48.2081743,
lng: 16.3738189
}
});
}
function calculate(map) {
console.log("calculating")
map.data.forEach(function (feature) {
console.log("tester");
});
console.log("end calculating");
}
function loadGeoJson(map) {
map.data.loadGeoJson('mini.json');
}
google.maps.event.addDomListener(window, 'load', function () {
initialize();
loadGeoJson(myMap);
calculate(myMap);
});
This is caused by javascripts asynchronous nature. When you have the code
loadGeoJson(myMap);
calculate(myMap);
and loadGeoJson loads an external resource, calculate will most likely be executed before loadGeoJson has finished. It is very easy to reproduce your problem.
Unfortunately there is no callback opportunity in google.maps.Data::loadGeoJson, but if you wrap the call of calculate into a small setTimeout, then you should be good :
loadGeoJson(myMap);
setTimeout(function() {
calculate(myMap);
}, 500);
see a fiddle with your code from above -> http://jsfiddle.net/SAS6Q/
You can also use jQuery and Ajax to load your JSON synchronously to avoid setting time delays:
function loadGeoJson(map) {
$.ajax({
url: mini.json,
dataType: 'json',
async: false,
success: function(data)
{var features = map.data.addGeoJson(data);}
});
}
I can't get a custom icon to display using this code below. It just defaults to the default Google maps marker.
Any ideas where I'm going wrong?
$(function() {
$('#map_canvas').gmap({
'center':new google.maps.LatLng(54.5,-4.0),
'zoom':6,
'streetViewControl': false,
'callback':
function() {
setInterval( function() {
$.getJSON( 'URL/data_sets/json/sfuk47.php?'+ new Date().getTime(), 'category=activity', function(data) {
$.each( data.markers, function(i, m) {
$('#map_canvas').gmap(
'addMarker',{
'position': new google.maps.LatLng(m.lat, m.lng) });
});
});
}, 5000);
}
});
});
setInterval( function() {
$.ajax({
url:'URL/data_sets/json/sfuk47.php',
success: function(data) {
if (data == "refresh"){
window.location.reload();
}
}
});
}, 600000);
The JSON
{"markers":[
{"lat":59.889,"lng":1.249,"icon":"URL/icons/gl_icons/Red.png"},{"lat":59.892,"lng":1.235,"icon":"URL/icons/gl_icons/Red.png"},{"lat":56.778,"lng":-5.702,"icon":"URL/icons/gl_icons/Red.png"},{"lat":49.534,"lng":-1.814,"icon":"URL/icons/gl_icons/Red.png"},{"lat":56.608,"lng":-8.324,"icon":"URL/icons/gl_icons/Red.png"},{"lat":49.286,"lng":-2.183,"icon":"URL/icons/gl_icons/Red.png"},{"lat":49.289,"lng":-2.192,"icon":"URL/icons/gl_icons/Red.png"},{"lat":59.051,"lng":-7.525,"icon":"URL/icons/gl_icons/Red.png"},{"lat":58.965,"lng":-7.439,"icon":"URL/icons/gl_icons/Red.png"},{"lat":57.531,"lng":-6.895,"icon":"URL/icons/gl_icons/Red.png"},
{"lat":56.895,"lng":-6.372,"icon":"URL/icons/gl_icons/Red.png"}]}
Many thanks,
At first glance you're not setting the icon in the markers call. Try doing:
'addMarker',{
'position': new google.maps.LatLng(m.lat, m.lng),
'icon': m.icon });
But be aware you appear to be using API v2 which is deprecated.
Some relevant examples for API V3.
I'm newbie in AngularJS and testing with Jasmine. I have two describe with several httpBackend.whenPOST, but i dont know if its possible the next:
I want to include two nested describes, which the second uses all httpBackend.whenPost from the first one. But i want that one of these httpBackend.whenPost returns another Json having the same url. Is this possible?
describe('describe1', function(){
beforeEach(function(){
$httpBackend.whenPOST(/backend\/economicresponsible\/get\/.*/).
respond(function(method, url, data, headers) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'tests/json/economicData1.json', false);
xmlhttp.send();
return [200, JSON.parse(xmlhttp.response), {}];
});
.... more requests...
});
it('should be test', function(){
get response economicData1.json
});
describe('describe2', function(){
beforeEach(function(){
$httpBackend.whenPOST(/backend\/economicresponsible\/get\/.*/).
respond(function(method, url, data, headers) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'tests/json/economicData2.json', false);
xmlhttp.send();
return [200, JSON.parse(xmlhttp.response), {}];
});
});
it('should be test 2', function(){
get response economicData2.json
});
});
});