I'm having trouble figuring why the onClick event is not working inside jsFiddle. The code is working well on the browser, but when try to port it to jsFiddle I lose the ability to fire the onClick events.
My current code is the following:
For the HTML:
<body>
<button id="find-near-btn" onClick="getMylocation()">
Find companies near me
</button>
<button id="mark-pos-btn" onClick="markMyPosition()">
Mark my position
</button>
<div id="mymap"></div>
<div id="output"></div>
</body>
The js:
function initmap(initialLat, initialLong){
output.innerHTML += "<p>Initialized</p>";
if(!initialLat || !initialLat.length){
initialLat = 38.01693;
}
if(!initialLong || !initialLong.length){
initialLong = -8.69475;
}
var mymap = this.mymap = L.map('mymap',{
center: [initialLat, initialLong],
zoom: 15
});
var osmUrl='http://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
L.tileLayer(osmUrl, osmAttrib).addTo( mymap );
}
function getMylocation(){
output.innerHTML += "<p>Obtaining location.</p>";
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
mymap.setView(new L.LatLng(lat, long), 15);
}, function (error) {
// Get information based on IP
getLatLongByIP();
});
}
}
function getLatLongByIP()
{
$.get("http://ip-api.com/json", function(response) {
handleData(response.lat, response.lon);
}, "jsonp");
}
function handleData(lat, long){
mymap.setView(new L.LatLng(lat, long), 15);
}
function markMyPosition()
{
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
L.marker([lat, long]).addTo(mymap);
}, function (error) {
switch (error.code) {
case error.PERMISSION_DENIED:
output.innerHTML += "<p>User denied the request for Geolocation.</p>";
break;
case error.POSITION_UNAVAILABLE:
output.innerHTML += "<p>Location information is unavailable.</p>";
break;
case error.TIMEOUT:
output.innerHTML += "<p>The request to get user location timed out.</p>";
break;
case error.UNKNOWN_ERROR:
output.innerHTML += "<p>An unknown error occurred.</p>";
break;
}
});
}
}
initialLat = 38.01693;
initialLong = -8.69475;
initmap(initialLat, initialLong);
The fiddle can be found here. When I click any of the buttons I get nothing. Any idea on how can I make this work?
You need to change your JS code to be inside your page's <body> tag. Use the little cog at the top right of the Javascipt panel and choose No wrap - in <body> under Load type. I already tested this and it works.
Related
I have Filemaker 18 with a Web Viewer using Apple Maps. When I move a pin on the map I want to send the coordinates to a filemaker script that writes to 2 fields. The problem is I can not trigger the script. The database is hosted on a FM Server 18. I have tried these 3 approaches but I am not even able to run a simple "Hello" script. The database name is WEBMAP.fmp12 . Here is how I have tried to run the script. I get no response:
1)
var theURL = "fmp://$/" & Get ( FileName ) & "?script=Hello¶m=" + lat +"|"+ long;
window.location = theURL;
2)
var theURL ="fmnet://ip_address_of_server/WEBMAP.fmp12?script=Hello¶m=" + lat +"|"+ long;
window.location = theURL;
3)
var theURL = "window.location = "fmp://$/WEBMAP.fmp12?script=Hello¶m=" + lat +"|"+ long;
window.location = theURL;
In fact I notice that when I have anything after showing a popup (then I want to run the script) the map is blank whatever I add like "alert("hello").
Here is my js file in Filemaker 18:
var message = document.getElementById("message");
var center = new mapkit.Coordinate(x,y); //
mapkit.init({
authorizationCallback: done => {
done(
"<<$$JWT.TOKEN>>"
);
}
}); //alert("<<$$JWT.TOKEN>>");
var map = new mapkit.Map("map", {
showsScale: mapkit.FeatureVisibility.Visible,
center: center
});
var marker = new mapkit.MarkerAnnotation(map.center, {
draggable: true,
selected: true,
title: "Dra meg og slipp!"
});
marker.addEventListener("drag-start", function(event) {
// No need to show "Drag me" message once user has dragged
// event.target.title = "";
// Hide message
message.style.display = "none";
});
marker.addEventListener("drag-end", function() {
// center map to marker when moved
map.setCenterAnimated(marker.coordinate);
// hide message after seconds
window.setTimeout(function () {
message.style.display = "none";
}, 3550);
// message to show after move
var lat = marker.coordinate.latitude;
var long = marker.coordinate.longitude;
var message = document.getElementById('message');
message.innerHTML = "<p>Vi har lagret posisjonen</p>Latitude: " + lat + " <br />Longitude: " + long;
message.style.display = "block";
//alert("Hello"); ** this alert works!! **
//var test = ‘Hello World!’; alert(test); ** this line gives me a blank map just adding a "var statement" **
var theURL = "fmp://$/" & Get ( FileName ) & "?script=Testaccess¶m=" + lat +"|"+ long;
window.location = theURL;
// alert(theURL) here gives me blank map
}); // END drag-end
map.addAnnotation(marker);
var lat = marker.coordinate.latitude;
var long = marker.coordinate.longitude;
var borchbio = new mapkit.CoordinateRegion(
new mapkit.Coordinate(lat,long),
new mapkit.CoordinateSpan(0.002, 0.002)
);
map.region = mymap;
map.mapType = "hybrid";map.setCenterAnimated(new mapkit.Coordinate(x,y), true);
The solution was to set "fmurlscript" rights. Thanks to #michael.hor257k and more detailed help from #paul_tuckey at the Claris Community. His answer here.
File-->Manage-->Security-->Advanced Settings-->Extended Privileges,
Select fmurlscript
Click Edit,
Add the Privilege set that is aligned to your Account Name to the selected fmurlscript
With this code I am able to run a FM script from javascript. Here is the code that triggers the script. Notice that when my database is "WEBMAP.fmp12" I only use "WEBMAP" as the name. I am sending the lat and long to the script that does stuff with it (converts it and writes to the post). The "fmp18://" targets specific version 18.
var theURL = "fmp18://$/WEBMAP?script=My_FM_Script_Name¶m=" + lat +"|"+ long;
window.location = theURL;
I'm Trying to build an app with Cordova. With the app you should take pictures, these pictures needs to be uploaded to a database together with the location where the picture is taken.
The app on default shows a x number of the most nearest taken pictures to your live location.
Beneath here i post the javascript code i have right now, most of the code is from Cordova self. Is it better to modify this code or start over?
I can now access the camera and take a picture, but how do i upload this picture together with the location to a database?
And how can load the nearest pictures from the database?
var Latitude = undefined;
var Longitude = undefined;
window.onload = function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
navigator.notification.alert("ready");
document.getElementById("camera").addEventListener
("click", cameraTakePicture);
}
function cameraTakePicture() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData, imageURI) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
getLocation();
navigator.notification.alert(image.src);
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
function getLocation() {
navigator.notification.alert("start locatie");
navigator.geolocation.getCurrentPosition(onPicturesSuccess, onPicturesError, { enableHighAccuracy: true });
}
var onPicturesSuccess = function (position) {
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
getPictures(Latitude, Longitude);
}
function getPictures(latitude, longitude) {
//Load pictures which are the nearest
}
var onPicturesWatchSuccess = function (position) {
var updatedLatitude = position.coords.latitude;
var updatedLongitude = position.coords.longitude;
if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
Latitude = updatedLatitude;
Longitude = updatedLongitude;
getPictures(updatedLatitude, updatedLongitude);
}
}
// Error callback
function onPicturesError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Watch your changing position
function watchPicturePosition() {
return navigator.geolocation.watchPosition
(onPicturesWatchSuccess, onPicturesError, { enableHighAccuracy: true });
}
You can use Cordova File Transfer Plugin to upload your photos to your backend service (DB). In FT Plugin you can add some additional headers, or properties e.g. LAT and LON properties.
Since you didn't specifically mention it, I'm going to assume you have access to jQuery inside your Cordova app.
Inside your onSuccess you have to make an AJAX call that submits the image and location to your PHP server. Below is an example:
var request = {
'url': 'path/to/your/php/script.php',
'method': 'POST',
'data': {
'image': image.src,
'location': getLocation()
}
}
$.ajax(request).done(function(response) {
// request is done
});
Your PHP server script will have to take the incoming data and save it to your database.
I've generate the api key on https://console.cloud.google.com. and then i use that key in my code like
"https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap" in my script tag.
when i visit the generated url then that stated an error:
You must use an API key to authenticate each request to Google Maps
Platform APIs. For additional information, please refer to
http://g.co/dev/maps-no-account
function initMap(){
//
}
var x = document.getElementById('output');
function getLocation() {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
else{
x.innerHTML = "Browser Not Compatible";
}
}
function showPosition(position) {
x.innerHTML = "latitude = "+position.coords.latitude;
x.innerHTML += "<br>";
x.innerHTML += "longititude = "+position.coords.longitude;
var locAPI = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude+"&sensor=true";
x.innerHTML = locAPI;
}
<div id="wrapper">
<button id="location-button"
onclick="getLocation()">Get User Location</button>
<div id="output"></div>
</div>
can some body please help me to resolve this issue
I think you missed the key param in showPosition(). Can you please try this:
function showPosition(position) {
x.innerHTML = "latitude = "+position.coords.latitude;
x.innerHTML += "<br>";
x.innerHTML += "longititude = "+position.coords.longitude;
var locAPI = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude+"&sensor=true&key=your_key";
x.innerHTML = locAPI;
}
Hope this helps!
i have the following code:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(posi) {
var lat = posi.coords.latitude;
var lon = posi.coords.longitude;
console.log(lat);
}, showError);
} else {
$(".position").html("Geolocation is not supported by this browser");
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
alert(lat);
$(".weather").html("<p>" + lat + "</p>");
the problem is that at the alert(lat) at te bottom it says that
it is undefined and at the start at the if condition the console.log(lat)
works perfectly fine! what is wrong at the bottom?
i have tried making global variables lon, lat before if but the same thing happens.
For reference, here is the corrected code, based on the earlier comments:
function showError(error) {
[...] // No change.
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(posi) {
var lat = posi.coords.latitude;
var lon = posi.coords.longitude;
console.log(lat);
alert(lat);
$(".weather").html("<p>" + lat + "</p>");
}, showError);
} else {
$(".position").html("Geolocation is not supported by this browser");
}
I'm coding a web app which is using by maps. I want to find visitor's location. It is working on firefox but not working on chrome. Chrome says "it is blocked that track your location by this page." How can i fix it for chrome?
function onPositionUpdate(position)
{
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert("Current position: " + lat + " " + lng);
}
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(onPositionUpdate);
else
alert("navigator.geolocation is not available");
and now I try this:
function get_location() {
if (geo_position_js.init()) {
geo_position_js.getCurrentPosition(show_map, handle_error);
}
}
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("lat:" + latitude + " long:" + longitude);
}
function handle_error(err) {
alert(err.code);
if (err.code == 1) {
// user said no!
}
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_map, handle_error);
} else {
error('not supported');
}
When I run this with chrome I get "javascript alert 1" error. It is working on firefox.
Edit: I solve this problem by using html5 geolocation http://www.w3schools.com/html/html5_geolocation.asp
Type on address bar: chrome://settings/content
Some features only be accessible on "secure origins" (such as HTTPS) where the full ancestor chain is also secure.
https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins