I am building a website which use geolocation code, It suppose to load mapCanvas and after user click on "Finde Me!" button get his location and set a center of a map based on user location. It's working fine with Firefox, Chrome, Safari, tested on regular PC and iPhone the only device doesn't work with it is any mobile phone with Android. here is a code:
<script src="http://maps.google.com/maps?file=api&v=3&key=YourKey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(17, 25);
iconBlue.shadowSize = new GSize(1, 1);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(17, 25);
iconRed.shadowSize = new GSize(1, 1);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(50.061795,19.936924), 16);
// Change this depending on the name of your PHP file
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
function findLoc(){
if (!navigator.geolocation) {
alert('Sorry, your browser does not support Geo Services');
}
else {
// Get the current location
navigator.geolocation.getCurrentPosition(showMap);
}
}
function showMap(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var myPoint = new GLatLng(lat, lon);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(myPoint, 15);
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
}
I couldn't find any solution to make it work.
PS
There is no errors or statements giving any hint making it more understandable.
Device got GPS enable.
pleas help I've been trying to figure it out for 2 weeks
I'm afraid you just have an arduous old-fashioned debug in front of you. My approach would be to add visible output at various important points in the code (just before and after getCurrentPosition is called, and at the beginning of showMap, for instance) and narrow down from there just where the failure is occurring. Once you know what's failing you can probably develop an idea of why, but until you know that you're flailing in the dark.
(I've worked on a geolocation-based mobile webapp that supported Android, so in case you need any reassurance, there's nothing inherently impossible about your situation.)
Related
I was trying to send json array from my web into an arraylist in a class with volley libarary
Here is array that i want to be filled
i want to replace dummy data in function getBestSelling() with data from web
Filename = DummyDataSource.kt (it is just plain kotlin class)
fun getBestSelling(): Observable<ArrayList<ProductEntity>> {
val dummy1 = ProductEntity(name = "Bell Pepper Red", description = "1kg, Priceg",
price = 20000,
picture = R.drawable.iv_pepper_red,
id = 5
)
val dummy2 = ProductEntity(name = "Beef bone", description = "1kg, Priceg",
price = 25000,
picture = R.drawable.iv_beef_bone,
id = 6
)
val dummy3 = ProductEntity(name = "Boiler Chicken", description = "1kg, Priceg",
price = 15000,
picture = R.drawable.iv_boiler_chicken,
id = 7
)
val dummy4 = ProductEntity(name = "Ginger", description = "250gm, Priceg",
price = 22000,
picture = R.drawable.iv_ginger,
id = 4
)
val data = listOf(dummy1, dummy2, dummy3, dummy4)
return Observable.just(ArrayList(data))
}
Here are what i do to get array filled
fun getBestSelling(): Observable<ArrayList<ProductEntity>> {
var url:String="http:// 192.168.56.1/toko-online/mobile/pro_kategori.php"
var rq : RequestQueue = Volley.newRequestQueue(this)
var data = ArrayList<ProductEntity>()
var js = JsonArrayRequest(Request.Method.GET,url,null, Response.Listener{ response ->
for (x in 0..response.length()-1){
data.add(ProductEntity(response.getJSONObject(x).getInt("id"),
response.getJSONObject(x).getInt("id"),response.getJSONObject(x).getString("name"),
response.getJSONObject(x).getString("url"),response.getJSONObject(x).getString("description"),
response.getJSONObject(x).getInt("price"),response.getJSONObject(x).getInt("stock"),
response.getJSONObject(x).getInt("category_id")))
}
}, Response.ErrorListener { error ->
Toast.makeText(this,error.message,Toast.LENGTH_LONG).show()
})
rq.add(js)
return Observable.just(data)
}
The error come from line " var rq : RequestQueue = Volley.newRequestQueue(this)"
it says
"Type mismatch: inferred type is DummyDataSource but Context! was expected"
so i copied this code
fun getdata(): Observable<ArrayList<ProductEntity>> {
var url:String="http:// 192.168.56.1/toko-online/mobile/pro_kategori.php"
var rq : RequestQueue = Volley.newRequestQueue(this)
var data = ArrayList<ProductEntity>()
var js = JsonArrayRequest(Request.Method.GET,url,null, Response.Listener{ response ->
for (x in 0..response.length()-1){
data.add(ProductEntity(response.getJSONObject(x).getInt("id"),
response.getJSONObject(x).getInt("id"),response.getJSONObject(x).getString("name"),
response.getJSONObject(x).getString("url"),response.getJSONObject(x).getString("description"),
response.getJSONObject(x).getInt("price"),response.getJSONObject(x).getInt("stock"),
response.getJSONObject(x).getInt("category_id")))
}
}, Response.ErrorListener { error ->
Toast.makeText(this,error.message,Toast.LENGTH_LONG).show()
})
rq.add(js)
return Observable.just(data)
}
into oncreate in the main activity. But because of that i cant fill array within getBestSelling() in DummyDataSource.kt because the function getdata() only return data to oncreate
Is there any way to make data go to getBestSelling() in DummyDataSource.kt ?
Move your function back out of onCreate and replace "this" with a context reference (requreContext() or create a Context var in onCreate to reference)
I wrote it in one of the hmi design programs. It´s IoT software.
After connecting with the source (my fall Siemens Logo 8) - PLC hardware, I get the ReferenceError, when I click on every button. These are my triggers to fire up the function. They are connected to start the animation.
What should I change to get rid of this errors?
Thanks,
RJ
var TUP= function fAUFmachen() {
var animateAUF2 = LeitstandSCHENKERRadeburg.getElementById('animateAUF2');
var animateAUF3 = LeitstandSCHENKERRadeburg.getElementById('animateAUF3');
var animateAUF4 = LeitstandSCHENKERRadeburg.getElementById('animateAUF4');
var animateAUF5 = LeitstandSCHENKERRadeburg.getElementById('animateAUF5');
var animateAUF6 = LeitstandSCHENKERRadeburg.getElementById('animateAUF6');
var animateAUF7 = LeitstandSCHENKERRadeburg.getElementById('animateAUF7');
var animateAUF8 = LeitstandSCHENKERRadeburg.getElementById('animateAUF8');
var animateAUF9 = LeitstandSCHENKERRadeburg.getElementById('animateAUF9');
animateAUF2.beginElement();
animateAUF3.beginElement();
animateAUF4.beginElement();
animateAUF5.beginElement();
animateAUF6.beginElement();
animateAUF7.beginElement();
animateAUF8.beginElement();
animateAUF9.beginElement();
}
var TDOWN= function fZUmachen() {
var animateZU2 = LeitstandSCHENKERRadeburg.getElementById('animateZU2');
var animateZU3 = LeitstandSCHENKERRadeburg.getElementById('animateZU3');
var animateZU4 = LeitstandSCHENKERRadeburg.getElementById('animateZU4');
var animateZU5 = LeitstandSCHENKERRadeburg.getElementById('animateZU5');
var animateZU6 = LeitstandSCHENKERRadeburg.getElementById('animateZU6');
var animateZU7 = LeitstandSCHENKERRadeburg.getElementById('animateZU7');
var animateZU8 = LeitstandSCHENKERRadeburg.getElementById('animateZU8');
var animateZU9 = LeitstandSCHENKERRadeburg.getElementById('animateZU9');
animateZU2.beginElement();
animateZU3.beginElement();
animateZU4.beginElement();
animateZU5.beginElement();
animateZU6.beginElement();
animateZU7.beginElement();
animateZU8.beginElement();
animateZU9.beginElement();
}
var LE1UP= function LE1UPmachen() {
var LE1animateUP = LeitstandSCHENKERRadeburg.getElementById('LE1animateUP');
LE1animateUP.beginElement();
}
var LE1DOWN= function LE1DOWNmachen() {
var LE1animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE1animateDOWN');
LE1animateDOWN.beginElement();
}
var LE2UP= function LE2UPmachen() {
var LE2animateUP = LeitstandSCHENKERRadeburg.getElementById('LE2animateUP');
LE2animateUP.beginElement();
}
var LE2DOWN= function LE2DOWNmachen() {
var LE2animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE2animateDOWN');
LE2animateDOWN.beginElement();
}
var LAUP= function LAUPmachen() {
var LAanimateUP = LeitstandSCHENKERRadeburg.getElementById('LAanimateUP');
LAanimateUP.beginElement();
}
var LADOWN= function LADOWNmachen() {
var LAanimateDOWN = LeitstandSCHENKERRadeburg.getElementById('LAanimateDOWN');
LAanimateDOWN.beginElement();
}
var ULUP= function ULUPmachen() {
var ULanimateUP = LeitstandSCHENKERRadeburg.getElementById('ULanimateUP');
ULanimateUP.beginElement();
}
var ULDOWN= function ULDOWNmachen() {
var ULanimateDOWN = LeitstandSCHENKERRadeburg.getElementById('ULanimateDOWN');
ULanimateDOWN.beginElement();
}
var AUP= function AUPmachen() {
var AanimateUP = LeitstandSCHENKERRadeburg.getElementById('AanimateUP');
AanimateUP.beginElement();
}
var ADOWN= function ADOWNmachen() {
var AanimateDOWN = LeitstandSCHENKERRadeburg.getElementById('AanimateDOWN');*/
AanimateDOWN.beginElement();
}
fAUFmachen();
fZUmachen();
LE1UPmachen();
LE1DOWNmachen();
LE2UPmachen();
LE2DOWNmachen();
LAUPmachen();
LADOWNmachen();
ULUPmachen();
ULDOWNmachen();
AUPmachen();
ADOWNmachen();
TUPmachen();
TDOWNmachen();
Your code calls
LE1DOWNmachen()
But the only function definition that contains that label is this:
var LE1DOWN= function LE1DOWNmachen() {
var LE1animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE1animateDOWN');
LE1animateDOWN.beginElement();
}
But this code is not defining a function called LE1DOWNmachen(). It is actually equivalent to this:
var LE1DOWN = function() {
var LE1animateDOWN = LeitstandSCHENKERRadeburg.getElementById('LE1animateDOWN');
LE1animateDOWN.beginElement();
}
The LE1DOWNmachen is meaningless here. It is being ignored. To invoke this function, you need to call
LE1DOWN();
Demo:
var LE1DOWN = function LE1DOWNmachen() {
console.log("Here!");
}
// This works
LE1DOWN();
// But this throws a reference error
LE1DOWNmachen();
If you want the function to be called LE1DOWNmachen, then define it like this:
function LE1DOWNmachen() {
console.log("Here!");
}
or this
var LE1DOWNmachen = function() {
console.log("Here!");
}
If you want both names to work, you can do this:
function LE1DOWNmachen() {
console.log("Here!");
}
var LE1DOWN = LE1DOWNmachen;
I have scriptet me a maps with markers based on a MySQL Table.
The position is in the Table.
Now, i would like to write with HTML in the InfoWindow, because it not show HTML on the InfoWindow on the Map.
downloadUrl('inc/map_bridge.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var ide = markerElem.getAttribute('id');
var desc = markerElem.getAttribute('beschreibung');
var type = markerElem.getAttribute('art');
var link = '<p>Klicke für weitere infos: Hier';
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = 'ID' + ide + ': ' + name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = desc + link
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
It show only so:
show example picture
the following i have in the MySQL-Table
first line<br>second line
If 'beschreibung' were the result of SELECT SQL, the reason is escaped SELECT
SQL result.
(I'm in short of reputation, so write in answer form.)
I'm trying to figure out how to parse a JSON feed into a table in Dart. I'm not sure if I should use a Map but if I do, I'm not sure how to approach extracting data. I want to have one cell to hold the assetID, then another for domain name, and another for IP address. Please let me know if you need more information.
Dart:
void loadData()
{
var url = "http://localhost:8080/***selectAll";
//call the web server asynchronously
var request = HttpRequest.getString(url).then(onDataLoaded);
}
void onDataLoaded(String response)
{
TableElement table = querySelector("#domainTableSelector");
//table.children.add();
var jsonString = response;
// print(jsonString);
List<String> list = new List<String>();
list.add(jsonString);
for (var x = 0; x < list.length; x++)
{
//create new table row
TableRowElement row = table.insertRow(x+1);
TableCellElement cell = row.insertCell(x);
cell.text = list.toString();
// print(list);
}
// Iterator itr= list.iterator();
//
// print("Displaying List Elements,");
//
// while(itr.hasNext())
// {
// print(itr.next());
// }
}
JSON
[{"serviceResponseValue":[{"assetId":"8a41250446b89b5f0146b04d49910023","oplock":0,"longitude":115.86,"domainName":"free-aus-trip.au","latitude":-31.95,"ipAddress":"6.0.0.6"},{"assetId":"8a49859246918966014691b1aac9000c","oplock":0,"longitude":-65.30,"domainName":null,"latitude":-24.18,"ipAddress":"4.0.0.4"},{"assetId":"8a49859246876566014691b1437512e4","oplock":0,"longitude":77.60,"domainName":"allmovies.cn","latitude":12.97,"ipAddress":"14.0.0.14"},{"assetId":"8a49850446b04b5f0146b04d49910000","oplock":0,"longitude":112.47,"domainName":"getrichez.cn","latitude":32.98,"ipAddress":"5.0.0.5"},{"assetId":"8a498592469189660146919b7a210006","oplock":0,"longitude":-37.61,"domainName":"googles.com","latitude":55.75,"ipAddress":null},{"assetId":"8a42250876b89b5f0876b04d49910763","oplock":0,"longitude":-68.90,"domainName":"lolcatzfun.net","latitude":-22.48,"ipAddress":"8.0.0.8"},{"assetId":"8a498592469189660146919f8d700008","oplock":0,"longitude":113.50,"domainName":"ccn.com","latitude":52.03,"ipAddress":null},{"assetId":"8a45250446b89b5f0876b04d49910187","oplock":0,"longitude":115.84,"domainName":"free-aus-trip.au","latitude":-31.86,"ipAddress":"7.0.0.7"},{"assetId":"8a49859246918966014691aeda76000a","oplock":0,"longitude":3.38,"domainName":"cashnow.net","latitude":6.52,"ipAddress":"2.0.0.2"},{"assetId":"8a49859246918966014691ae19df0009","oplock":0,"longitude":7.48,"domainName":"free-money.tv","latitude":9.07,"ipAddress":"222.222.222.222"},{"assetId":"8a498592469189660146919e09900007","oplock":0,"longitude":30.34,"domainName":"facebok.com","latitude":59.93,"ipAddress":"111.111.111.222"},{"assetId":"8a49859246918966014691b14375000b","oplock":0,"longitude":116.41,"domainName":null,"latitude":39.90,"ipAddress":"0.0.0.111"}],"messages":{"messages":[]}}]
To work with JSON, you have in dart a great thing : dart:convert => JSON
here some example of use:
var encoded = JSON.encode([1, 2, { "a": null }]);
var decoded = JSON.decode('["foo", { "bar": 499 }]');
I have done some thing but i'm not sure that is fit perfectly with your need
import 'dart:html';
import 'dart:convert';
void loadData()
{
var url = "http://localhost:8080/***selectAll";
//call the web server asynchronously
var request = HttpRequest.getString(url).then(onDataLoaded);
}
void onDataLoaded(String response)
{
TableElement table = querySelector("#domainTableSelector");
//table.children.add();
var jsonString = response;
// print(jsonString);
var jsonObject = JSON.decode(jsonString);
for (var x = 0; x < jsonObject.length; x++)
{
//create new table row
TableRowElement row = table.insertRow(x+1);
for (var d in jsonObject[x]["serviceResponseValue"]) {
TableCellElement cell = row.insertCell(x);
cell.text = d["assetId"];
cell = row.insertCell(x);
cell.text = d["domainName"];
cell = row.insertCell(x);
cell.text = d["ipAddress"];
print(d["assetId"]);
print(d["domainName"]);
print(d["ipAddress"]);
}
// print(list);
}
}
You parse JSON into a Dart data structure using
import 'dart:convert' show JSON;
var decoded = JSON.decode(jsonString);
see also How to handle JSON in Dart (Alexandres answer)
decoded is then a Dart data structure (lists, maps, values) that you can iterate over or investigate in the debugger. If you need further assistance please add a comment.
What I want to achieve -
I have 2 variables - Latitude & Longitude, and both are updating in the background. I want to draw a line as per the variables are updating.
What I'm thinking -
Create an array path.
Create the line.
Update the path of the line using setInterval
The Code -
var poly;
function initialize() {
var Latitude
var Longitude
Latitude= {code that updates}
Longitude= {code that updates}
//create map
var mapOptions = {
zoom: 8,
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var path = [];
poly = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
var myVar = setInterval(function(){updateposition()},2000);
function updateposition(){
path.push(new google.maps.LatLng(Latitude,Longitude));
}
}
Problem - No line is appearing at all :(
You need to update the path property of the polyline (poly.setPath(path)) after updating the path. Looking closer at your code, I am not sure how you expect Latitude and Longitude to update where they are (local to the initialize function).
function updateposition(){
path.push(new google.maps.LatLng(Latitude,Longitude));
poly.setPath(path);
}
here is an example that updates the polyline from computed coordinates based on the time
var poly;
var Latitude = null;
var Longitude = null;
var map = null;
var path = [];
function initialize() {
//create map
var mapOptions = {
zoom: 2,
center:new google.maps.LatLng(0,0)
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
poly = new google.maps.Polyline({
path: path,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
var myVar = setInterval(function(){updateposition()},2000);
}
function updateposition(){
var date = new Date();
var time = date.getMinutes()*60+date.getSeconds();
Latitude= 45*Math.sin((time-1800)*Math.PI/1800.0)
Longitude= (time/10)-180;
path.push(new google.maps.LatLng(Latitude,Longitude));
if (path.length == 1) {
map.setCenter(path[0]);
map.setZoom(8);
} else {
map.setCenter(path[path.length-1]);
}
poly.setPath(path);
}
google.maps.event.addDomListener(window, 'load', initialize);