I have a PHP function that creates a kml file. (I validated the output and it's a valid KML file).
Then, I use Google Maps with these file, but I don't know why, no data appears on the map...
In PHP, I have this:
//some stuff here
return 'iniMap("", "", "http://my.web.com/Class/API/GMaps/Rep/'.$g->make($l, $a, $user).'.kml")';
This function is called via AJAX, so the return string will be evaluated with JS "eval()". My Google Maps functions are:
/*GOOGLE MAPS FUNCTIONS*/
function iniMap(x,y,url){
n=document.createElement('DIV');
n.id='map_canvas';
ge('con').appendChild(n);
var latlng=new google.maps.LatLng(x,y);
var map=new google.maps.Map(ge("map_canvas"),{zoom:6,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP});
var div1=document.createElement('DIV');
var homeControl1=new makeControl(div1,'t1');
var div2=document.createElement('DIV');
var homeControl2=new makeControl(div2,'t2');
var div3=document.createElement('DIV');
var homeControl3=new makeControl(div3,'t3');
var div4=document.createElement('DIV');
var homeControl4=new makeControl(div4,'t4');
var ctaLayer=new google.maps.KmlLayer(url);
div1.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(div1);
div2.index = 2;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(div2);
div3.index = 3;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(div3);
div4.index = 4;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(div4);
ctaLayer.setMap(map);
}
function makeControl(d,t){
d.style.padding='5px';
var controlUI=document.createElement('DIV');
controlUI.style.backgroundColor='#FEFEFE';
controlUI.style.borderStyle='solid';
controlUI.style.borderWidth='1px';
controlUI.style.cursor='pointer';
controlUI.style.textAlign='center';
controlUI.style.width='60px';
controlUI.style.height='17px';
d.appendChild(controlUI);
var controlText=document.createElement('DIV');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft='4px';
controlText.style.paddingRight='4px';
controlText.innerHTML=t;
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI,'click',function(){doAction(t);});
}
function doAction(t){
if(t=='t1'){document.location.href='http://my.web.com?t=sy0'}
else if(t=='t2'){document.location.href='http://my.web.com?t=sm0'}
else if(t=='t3'){document.location.href='http://my.web.com?t=sw0'}
else if(t=='t4'){document.location.href='http://my.web.comt=sd0'}
}
What I'm doing wrong?
Thanks!
I fixed the problem...
It was a cache issue. Maybe some a file with bad data was cached, and therefore my function was always getting that bad file...
Today I changed the way to generate the file name, and the map start working...
Thanks to #geocodezip for all the answers and sorry for the time wasting...
Related
The question arises from this note:
Someone here suggested using div's. The HTML requirement is very
skeletal. The 3D display is basically canvas, but it requires seven
three.js files, ten js files of my own making to exchange parameters
and other variables with the global variable and .dae collada files
for each of the 3D models you can see. If they could be linked in like
jQuery that might be the solution but I wonder about conflicts.
on Questions on extending GAS spreadsheet usefulness
principally, if they can be linked like jQuery part
The files to be linked are on myDrive. The thinking is that if I can copy the files into GAS editor, it seems as secure and more flexible to bring them into the html directly.
code.gs
function sendUrls(){
var folder = DriveApp.getFoldersByName("___Blazer").next();
var sub = folder.getFoldersByName("assembler").next();
var contents = sub.getFiles();
var file;
var data = []
while(contents.hasNext()) {
file = contents.next();
type = file.getName().split(".")[1];
url = file.getUrl();
data.push([type,url]);
}
return data;
}
html
google.script.run.withSuccessHandler(function (files) {
$.each(files,function(i,v){
if(v[0] === "js"){
$.get(v[1])
}
})
})
.sendUrls();
The first url opens the proper script file but the origin file is not recognisable to me.
I am not sure that this is a proper answer as it relies on cors-anywhere, viz:
function importFile(name){
var myUrl = 'http://glasier.hk/cors/tba.html';
var proxy = 'https://cors-anywhere.herokuapp.com/';
var finalURL = proxy + myUrl;
$.get(finalURL,function(data) {
$("body").append(data);
importNset();
})
}
function importNset(){
google.script.run
.withSuccessHandler(function (code) {
path = "https://api.myjson.com/bins/"+code;
$.get(path)
.done((data, textStatus, jqXHR) => {
nset = data;
cfig = nset.cfig;
start();
})
})
.sendCode();
}
var nset,cfig;
$(document).ready(function(){
importFile();
});
but it works, albeit on my machine, using my own website as the resource.
I used the Gas function in gas Shop to make the eight previously tested js files into the single tba.html script only file. I swapped the workshop specific script files for those needed for google.script.run but otherwise that was it. If I could find out how to cors-enable my site, I think I might be able to demonstrate how scripts might be imported to generate different views from the same TBA and spreadsheet interfaces.
Is there any way to parse a kml file and get the coordinates from it with JavaScript?
I've tried doing it with "getElementsByTagName" (like here) but debugger says it's not a valid function.
Any ideas?
It's not easy but you can import the file xml and the parsing with jquery parseXML
// import the file --- se related function below
var content = getSelectedFileContent(importFilename);
// build an xmlObj for parsing
xmlDocObj = $($.parseXML(content));
function getSelectedFileContent(filename) {
// var importFilename = importAreaBaseURL + filename;
var request = new XMLHttpRequest();
request.open("GET", filename, false);
request.send(null);
return request.responseText;
};
at this point you can easy parse the xml obj for placemark and iterate over them for the tag/value you need via jquery
var placemarks = xmlDocObj.find("Placemark");
placemarks.each(function (index) {
if ($(this).find("Polygon").length > 0) {
tipoGeom = "Polygon";
tmpHtml = $(this).find("Polygon").find("outerBoundaryIs").find("coordinates").html();
gmlll_geom = kmlCoords2gmlll( tmpHtml);
inner = $(this).find("Polygon").find("innerBoundaryIs");
inner.each(function(index,el) {
$(el).find("coordinates").html(); // this are the coordinates for polygion
});
}
});
These are sample parts (an extract of functioning code .... not all you need) this code is just for a suggestion....
How to get all places like Entertainment, food, gas station etc on google map plotted route from source to destination only on route not nearby.
To build on the link that #geocodezip gave, to work around query limits it might be a better practice to make a bounding box based on steps rather than using the Google Maps utility, and then filter locations by actual distance to a node in the step. This could be accomplished using the following code:
In initialize(), put:
var placeserv = null;
function initialize(){
//setup map
placeserv = new google.maps.PlacesService(map); //use your map variable
}
In the callback function for the Directions Service (using parameters results and status), you can include something like this:
var route = results[0];
var steps = route.legs[0].steps;
for(var i=0; i<steps.length; i++){
var lats = steps[i].path.map(function(a){return a.lat()});
var lngs = steps[i].path.map(function(a){return a.lng()});
var box = new google.maps.LatLngBounds(
new google.maps.LatLng(Math.max.apply(null, lats), Math.max.apply(null, lngs)),
new google.maps.LatLng(Math.min.apply(null, lats), Math.min.apply(null, lngs))
);
placeserv.radarSearch(yourRequest_seeDocumentation_or_geocodezipsCode,
function(r,s){callback(r,s,steps[i].path)}
);
//depending on the number of queries you need to make, you may to add in
//some setTimeouts
}
And then add a callback function for your call that checks if the route is within a specified degree. If so, it will do something with the location. (By the way, this requires the Geometry Library for Google Maps. Please look it up.)
var minimumDist = 300 //within 300 meters of a point on the route
function callback(results, status, stepPts){
if(results == 'OK'){
for(var j=0; j<results.length; j++){
for(var k=0; k<stepPts.length; k++){
var dist = google.maps.geometry.spherical.computeDistanceBetween(stepPts[k], results[j].geometry.location);
if(dist < minimumDist){
//do something with the location
}
}
}
}
}
Again, geocodezip has a very complete and excellent post in the link he gave you. This is just the implementation I would use to cut down on Places Service calls.
I am tryint yo understand some code from an opensource project that handles indexDB commands within a Google Chrome application.
The code is as follows :
var db = pm.indexedDB.db;
var trans = db.transaction([pm.indexedDB.TABLE_DRIVE_CHANGES], "readwrite");
var store = trans.objectStore(pm.indexedDB.TABLE_DRIVE_CHANGES);
var boundKeyRange = IDBKeyRange.only(driveChange.id);
var request = store.put(driveChange);
request.onsuccess = function (e) {
callback(driveChange);
};
request.onerror = function (e) {
console.log(e.value);
};
Although the app works, to me it seems that the following line is redundant code
var boundKeyRange = IDBKeyRange.only(driveChange.id);
Or am I missing something? The variable 'boundKeyRange' is never referenced anywhere.
Unless boundKeyRange is used later, you're not missing something. IDBKeyRange.only just creates an IDBKeyRange object, and if that object isn't used in some IndexedDB request, it does absolutely nothing.
Can anyone confirm that HTML widgets accept ClickHandlers on the Server side ? I can't get my below code to work.
I create a serverHandler (and for good measure I have even added a useless callback element). Subsequently, I add it to a HTML.addClickHander (for good measure I have even added it to .addMouseUpHandler as well). The function is NOT executed.
var mouseclick = app.createServerHandler("handleTrainingClick_").addCallbackElement(lstFilter);
var params = [ "fromOrg", "trainingTitle", "dueDate", "medical", "status" ];
var resultSet = blSelectActiveTrainings_();
while (resultSet.hasNext()) {
var training = resultSet.next();
var html = TRAINING_ROW;
for (var pI in params) {
html = html.replace("$"+params[pI], training[params[pI]]);
}
pnlList.add(app.createHTML(html).setId(training.id).addClickHandler(mouseclick).addMouseUpHandler(mouseclick)
.addMouseMoveHandler(mousemove).addMouseOutHandler(mouseout).addMouseOverHandler(mouseover));
}
function handleTrainingClick_(e) {
Logger.log(e.source);
var app = UiApp.getActiveApplication();
return app;
}
HTML widgets server side handlers work just fine. It was an incorrect reference in my code. Thanks all.