Have a quick question. On my website I have a form that allows users to input their city, state, and country. This information is converted to $lat and $lng, which is used to create a marker on a google map. Problem is, I have multiple users that select the same city. Clustering is a HUGE pain... to be honest, I can't seem to find a good tutorial and I'm feeling a bit hopeless.
So I thought I'd just modify each $lat and $lng slightly. For example, this is the info I get for Travis AFB, CA: lat="38.263065" lng="-121.949699". Wondering if it's possible to add a bit of code that might let me modify those last bits. Any suggestions???
Here's how I geocode $address (combination of $city, $state, $country):
$geocodestring=file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=' . urlencode($address) );
$geocodedinfo=json_decode($geocodestring);
$lat = $geocodedinfo->results[0]->geometry->location->lat;
$lng = $geocodedinfo->results[0]->geometry->location->lng;
And that information goes into my SQL database. This is the code that actually creates the map (pretty straightforward).
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.614495, -122.341861), 2);
map.enableScrollWheelZoom();
GDownloadUrl("world_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var first_name = markers[i].getAttribute("first_name");
var last_name = markers[i].getAttribute("last_name");
var email = markers[i].getAttribute("email");
var affiliation = markers[i].getAttribute("affiliation");
var status = markers[i].getAttribute("status");
var service = markers[i].getAttribute("service");
var rank = markers[i].getAttribute("rank");
var specialty = markers[i].getAttribute("specialty");
var city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var country = markers[i].getAttribute("country");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, rank, first_name, last_name, email, affiliation, status, service, specialty, city, state, country) {
var marker = new GMarker(point);
var html = "" + rank + " " + first_name + " " + last_name + " " + service + ", " + status + " " + specialty + " " + affiliation + " " + city + ", " + state + " " + country + " " + email + " " + " ";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Any help/suggestions would be much appreciated!!!
Jeremy
markerclusterer for v2 may solve your problem.
Find code and examples here
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/
Related
I am using the embedded nodejs / javascript code for stripe checkout on my ecommerce website. However, I am trying to pass the name of the product(s) the customer will add to their cart, and the price as well, so I can display the items and prices on Stripe Checkout page.
I ran into the issue after making a connection to DB2, I cannot get the price of each item to be passed into the stripe checkout session. I think it may have to do with async, but even if it is, im not sure how to fix. I am also receiving the error: "(node:45673)UnhandledPromiseRejectionWarning: Error: Invalid integer: NaN"
(excuse the messy code. also some variables are not in use, just ignore)
app.post('/create-checkout-session', (req, res) => {
var amount = stringify(req.body)
console.log(req.body.sessionID)
var userId = req.body.sessionID
console.log("email: " + req.body.customer_email)
var email = req.body.customer_email;
var deliveryTotal = req.body.totalWithDelivery;
var totalVal = amount.split("=");
var totalPrice = parseFloat(totalVal[1]);
//console.log("TOTAL PRICE: " + totalPrice);
var finalPrice = parseFloat(Math.round(totalPrice * 100) / 100);
var finalTotal = parseFloat(Math.round(totalPrice * 100) / 100) + parseFloat(Math.round(deliveryTotal));
console.log("final total: " + finalTotal);
var itemName = ""
var itemPrice = ""
var totalNewPriceTest = ""
//query to database
var productsStripe = "select * from " + userId
console.log(userId)
console.log("query to db for displaying cart on stripe page")
ibmdb.open("DATABASE=BLUDB;HOSTNAME=;PORT=50000;PROTOCOL=TCPIP;UID="";PWD="";", function (err,conn) {
if (err) return console.log(err);
conn.query(productsStripe, function (err, rows) {
if (err) {
console.log(err)
}
console.log(rows)
for(var i = 0; i < rows.length; i++) {
itemName = rows[i]['ITEM']
itemPrice = rows[i]['PRICE']
totalNewPriceTest = parseFloat(rows[i]['PRICE'])
console.log("item name : " + itemName + " " + itemPrice )
totalNewPriceTest = parseFloat(totalNewPriceTest);
console.log("final overall prcie: " + (totalNewPriceTest))
}
console.log("inside productsStripe function.")
console.log("overall prcie: " + totalNewPriceTest)
})
})
totalNewPriceTest = parseFloat(totalNewPriceTest)
var grandTotal = totalNewPriceTest;
var finalGrandTotal = parseFloat(grandTotal)
console.log(parseFloat(finalGrandTotal))
//stripe
const session = stripe.checkout.sessions.create({
shipping_address_collection: {
allowed_countries: ['CA'],
},
payment_method_types: ['card'],
line_items: [
{
price_data: {
currency: 'CAD',
product_data: {
name: itemName,
},
unit_amount: finalGrandTotal,
//finalTotal * 100
},
quantity: 1,
},
],
mode: 'payment',
success_url: 'localhost:1001/successPg',
cancel_url: 'localhost:1001/catalogue',
customer_email: email,
});
console.log(session)
res.json({ id: session.id });
//console.log("customer id" + customer.id)
console.log("totalNewPriceTest " + totalNewPriceTest)
});
can anyone help? thank you in advance, and sorry for the terribly written code :(
You have to write following lines inside query callback :-
totalNewPriceTest = parseFloat(totalNewPriceTest)
var grandTotal = totalNewPriceTest;
var finalGrandTotal = parseFloat(grandTotal)
console.log(parseFloat(finalGrandTotal))
And for error check before parsing the data to int or float like
if(!isNAN(field))
value = parseFloat(field);
I did follow what you said, no errors, however it still doesn't reach the stripe checkout page... it logs in the console: Promise { }. i did research this and it says this has to once again do with async. not sure how to fix, read something about .then may work as well?
As you have guessed, it's a classic concurrency issue, first of all, this complete guide from MDN explains asynchronous javascript very well.
To briefly answer your case, you will need to continue executing stripe code in the query block. Why? Because you need to wait for the DB connection to open followed by a query execution, which both are asynchronous.
When you bypass those blocks, you're basically telling javascript to execute code in parallel, which in your case not what you want, you want to wait for the query to finish.
app.post('/create-checkout-session', (req, res) => {
var amount = stringify(req.body)
console.log(req.body.sessionID)
var userId = req.body.sessionID
console.log("email: " + req.body.customer_email)
var email = req.body.customer_email;
var deliveryTotal = req.body.totalWithDelivery;
var totalVal = amount.split("=");
var totalPrice = parseFloat(totalVal[1]);
//console.log("TOTAL PRICE: " + totalPrice);
var finalPrice = parseFloat(Math.round(totalPrice * 100) / 100);
var finalTotal = parseFloat(Math.round(totalPrice * 100) / 100) + parseFloat(Math.round(deliveryTotal));
console.log("final total: " + finalTotal);
var itemName = ""
var itemPrice = ""
var totalNewPriceTest = ""
//query to database
var productsStripe = "select * from " + userId
console.log(userId)
console.log("query to db for displaying cart on stripe page")
ibmdb.open("DATABASE=BLUDB;HOSTNAME=;PORT=50000;PROTOCOL=TCPIP;UID="";PWD="";", function (err,conn) {
if (err) return console.log(err);
conn.query(productsStripe, function (err, rows) {
if (err) {
console.log(err)
}
console.log(rows)
for(var i = 0; i < rows.length; i++) {
itemName = rows[i]['ITEM']
itemPrice = rows[i]['PRICE']
totalNewPriceTest = parseFloat(rows[i]['PRICE'])
console.log("item name : " + itemName + " " + itemPrice )
totalNewPriceTest = parseFloat(totalNewPriceTest);
console.log("final overall prcie: " + (totalNewPriceTest))
}
console.log("inside productsStripe function.")
console.log("overall prcie: " + totalNewPriceTest)
totalNewPriceTest = parseFloat(totalNewPriceTest)
var grandTotal = totalNewPriceTest;
var finalGrandTotal = parseFloat(grandTotal)
console.log(parseFloat(finalGrandTotal))
// continue executing here
//stripe
stripe.checkout.sessions.create({
shipping_address_collection: {
allowed_countries: ['CA'],
},
payment_method_types: ['card'],
line_items: [
{
price_data: {
currency: 'CAD',
product_data: {
name: itemName,
},
unit_amount: finalGrandTotal,
//finalTotal * 100
},
quantity: 1,
},
],
mode: 'payment',
success_url: 'localhost:1001/successPg',
cancel_url: 'localhost:1001/catalogue',
customer_email: email,
}).then((session) => {
console.log(session)
res.json({ id: session.id });
//console.log("customer id" + customer.id)
console.log("totalNewPriceTest " + totalNewPriceTest)
}).catch((err) => {
console.log('stripe err: ', err);
})
})
})
});
Other useful tips to follow:
Don't write business logic inside the router, instead create a controller file and move the logic into it.
Instead of connecting to the DB upon every request, create a DB connection instance and keep it open and available whenever you need it, start with creating its own helper file and then export the connection.
Mybot is saving user ID ect. to google sheets and respond ,but when added to a group it saves all user IDs as -1001199520004 and respond with undefined undefined + answer and saves name & surname as undefined undefined aswell.
function doPost(e) {
// this is where telegram works
var data = JSON.parse(e.postData.contents);
var text = data.message.text;
var id = data.message.chat.id;
var name = data.message.chat.id.first_name + " " +
data.message.chatid.last_name;
var answer = name + ", whatever " ;
sendText(id,answer);
SpreadsheetApp.openById(ssId).getSheets()[0].appendRow([new
Date(),id,name,text]);
if(/^#/.test(text)) {
var sheetName = text.slice(1).split(" ")[0];
var sheet = SpreadsheetApp.openById(ssId).getSheetByName(sheetName) ?
SpreadsheetApp.openById(ssId).getSheetByName(sheetName) :
SpreadsheetApp.openById(ssId).insertSheet(sheetName);
var comment = text.split(" ").slice(1).join(" ");
sheet.appendRow([new Date(),id,name,comment,answer]);
}
}
I want to convert zipcode to longitude and latitude and write to a csv file. I use storelocator by google and I need to place marker only with zipcode...
for (var i = 1, row; row = rows[i]; i++) {
row = this.toObject_(headings, this.parseRow_(row));
var features = new storeLocator.FeatureSet;
features.add(this.FEATURES_.getById('Wheelchair-' + row.Wheelchair));
features.add(this.FEATURES_.getById('Audio-' + row.Audio));
var position = new google.maps.LatLng(row.Ycoord, row.Xcoord);
var shop = this.join_([row.Shp_num_an, row.Shp_centre], ', ');
var locality = this.join_([row.Locality, row.Postcode], ', ');
var store = new storeLocator.Store(row.uuid, position, features, {
title: row.titre,
address: this.join_([shop, row.Street_add, locality], '<br>'),
hours: row.Hrs_of_bus
});
stores.push(store);
}
Ti.GeoLocation.forwardGeocoder() is not converting Non US address to lat and long values.
sample code below.
Ti.GeoLocation.forwardGeocoder('Hyderabad, India', function(e){
var lat = e.latitude;
var long = e.longitude;
});
with this code we are getting lat and long values are undefined.
The proper way to get US addresses, and everywhere else in the world (that Google can find) and display the Long/Lat on a titanium Map.
The code below uses the string variable: myAddress
var myAddress = address + ','+ city + ',' + postal + ',' + country //'Vieux Port, Montreal, Quebec, H2X3R4, Canada'
var xhrGeocode = Ti.Network.createHTTPClient();
xhrGeocode.setTimeout(120000);
xhrGeocode.onerror = function (e) {
alert('Google couldn\'t find the address... check your address');
};
xhrGeocode.onload = function (e) {
var response = JSON.parse(this.responseText);
if (response.status == 'OK' && response.results != undefined && response.results.length > 0) {
longitude = response.results[0].geometry.location.lng;
latitude = response.results[0].geometry.location.lat;
}
};
var urlMapRequest = "http://maps.google.com/maps/api/geocode/json?address=" + myAddress.replace(/ /g, '+');
urlMapRequest += "&sensor=" + (Ti.Geolocation.locationServicesEnabled == true);
xhrGeocode.open("GET", urlMapRequest);
xhrGeocode.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhrGeocode.send();
var addrReq = Titanium.Network.createHTTPClient();
var addrUrl = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&address="+ query;
addrReq.open("GET",addrUrl);
addrReq.send(null);
addrReq.onload = function()
{
var response = JSON.parse(this.responseText);
if(response.status == "OK"){
LT.Customlat=response.results[0].geometry.location.lat;
LT.Customlon=response.results[0].geometry.location.lng;
}
you will need to roll your own solution using google REST APIs, the underlying Titanium API does not support non-us addresses
I am building a PhoneGap iOS App with the help of the jquery-mobile framework. I have a primary jquery-mobile autodivided list, populated by an SQL database. This autodivided list work as expected. When clicking on one link of this dynamic list, a dynamic page is supposed to fire up, containing some extra details included in the same SQL database. However, when the database doesn't load the page details.
I successfully made this work outside jquerymobile framework, with a few script changes. But I really need the autodividers function coming from jquerymobile.
First I assumed that this dynamic page was outside the DOM, but adding the following function at mobileinit() doesn't solve my SQL loading issue:
$( 'fooddetails.html?id' ).live( 'pagebeforecreate',function(event, ui){
alert( 'This page was just inserted into the dom!' );
});
Below is a complete script for my database & the dynamic URL to fire the extra details page:
var db;
var dbCreated = false;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
db = window.openDatabase("FoodDirectoryDB", "1.0", "PhoneGap", 200000);
if (dbCreated)
db.transaction(getAlimentaries, transaction_error);
else
db.transaction(populateDB, transaction_error, populateDB_success);
}
function transaction_error(tx, error) {
$('#busy').hide();
alert("Database Error: " + error);
}
function populateDB_success() {
dbCreated = true;
db.transaction(getAlimentaries, transaction_error);
}
function getAlimentaries(tx) {
var sql = "select e.id, e.foodName, e.groupfoodName, e.quantity, e.picture, count(r.id) reportCount " +
"from food e left join food r on r.managerId = e.id " +
"group by e.id order by e.foodName ";
tx.executeSql(sql, [], getAlimentaries_success);
}
function getAlimentaries_success(tx, results) {
$('#busy').hide();
$('#foodList li').remove();
var len = results.rows.length;
for (var i=0; i<len; i++) {
var food = results.rows.item(i);
console.log(food.foodName);
$('#foodList').append('<li><a href="fooddetails.html?id=' + food.id + '">' +
'<img src="pics/' + food.picture + '" class="arrow-r"/>' +
'<p class="line1">' + food.foodName + '</p>' +
'</a></li>');
$( 'employeedetails.html?id' ).live( 'pageshow',function(event, ui){
alert( 'This page was just inserted into the dom!' );
});
}
$('#foodList').listview('refresh');
db = null;
}
function populateDB(tx) {
$('#busy').show();
tx.executeSql('DROP TABLE IF EXISTS food');
var sql =
"CREATE TABLE IF NOT EXISTS food ( "+
"id INTEGER PRIMARY KEY AUTOINCREMENT, " +
"foodName VARCHAR(50), " +
"groupfoodName VARCHAR(50), " +
"quantity VARCHAR(50), " +
"portion VARCHAR(50), " +
"managerId INTEGER, " +
"glucides VARCHAR(30), " +
"picture VARCHAR(200))";
tx.executeSql(sql);
tx.executeSql("INSERT INTO food (id,foodName,groupfoodName,managerId,quantity,portion,glucides,picture) VALUES (1,'Abricot','Fruits frais et fruits secs',1,'1 abricot','65g','5','fruits_legumes.png')");
tx.executeSql("INSERT INTO food (id,foodName,groupfoodName,managerId,quantity,portion,glucides,picture) VALUES (2,'Abricots secs','Fruits frais et fruits secs',1,'4 abricots secs','80g','30','fruits_legumes.png')");
I was also trying to add data-ajax="false" rel"external" to this dynamic link, but this doesn't change unfortunately and I read that these attributes in a dynamic link are not authorized:
$('#foodList').append('<li><a href="fooddetails.html?id=' + food.id + '">' +
Below is the script of the details dynamic page that doesn't load correctly:
var id = getUrlVars()["id"];
var db;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("opening database");
db = window.openDatabase("FoodDirectoryDB", "1.0", "PhoneGap", 200000);
console.log("database opened");
db.transaction(getAlimentary, transaction_error);
}
function transaction_error(tx, error) {
$('#busy').hide();
alert("Database Error: " + error);
}
function getAlimentary(tx) {
$('#busy').show();
var sql = "select e.id, e.foodName, e.groupfoodName, e.managerId, e.quantity, e.portion, e.glucides, " +
"e.picture, m.foodName managerFirstName, m.groupfoodName managerLastName, count(r.id) reportCount " +
"from food e left join food r on r.managerId = e.id left join food m on e.managerId = m.id " +
"where e.id=:id group by e.groupfoodName order by e.groupfoodName, e.foodName";
tx.executeSql(sql, [id], getAlimentary_success);
}
function getAlimentary_success(tx, results) {
$('#busy').hide();
$('#foodList li').remove();
var food = results.rows.item(0);
$('#foodPic').attr('src', 'pics/' + food.picture);
$('#foodName').text(food.foodName);
$('#foodgroupName').text(food.groupfoodName);
$('#foodQuantity').text(food.quantity);
$('#foodPortion').text(food.portion);
console.log(food.glucides);
if (food.glucides) {
$('#actionList').append('<li><a href="tel:' + food.glucides + '"><p class="line1">Teneur en Glucides</p>' +
'<p class="line2">' + food.glucides + '</p><img src="img/food.png" class="action-icon"/></a></li>');
}
$('#foodList').listview('refresh');
db = null;
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}