Forum | Appery.io

I have two variables that are pulled from an appery db and provide lat and long.

var getlat = Appery ('latLbl').text();
var getlong = Appery ('longLbl').text();

I would like to put these variables into the following code in place of the lat and long.

maps.googleapis.com/maps/api/staticmap?size=250x250&maptype=hybrid\&markers=size:mid%7Ccolor:red%7C47.6063889,-122.3308333&sensor=false

Sorry for the crappy post. I have tried several ways to post the original code and it would not display right.

Hello! This should help http://www.w3schools.com/jsref/jsref_...
http://sraji.wordpress.com/2011/01/10...

Thanks,
Just to follow up on what I did:

In the html panel I created a div that will hold the static map

Set the lat and long in localStorage to be referenced by the js

On page show set my javascript to look at the local storage and set the static googlemap within the div that was created in the html panel.

I included a screenshot. If i try and add this code to the forum it gets all "wierd" and messes up the post.

Hello! Your code looks correct and it works for us. Do console.log(img_url); to see what you actually get for img_url. Copy and paste URL from console.log to browser address line. This way you can check if address generates correctly. Also could you clarify what exactly doesn't work when you run this code. Could you send us screenshot?

Sorry, what i meant was the code that i posted works.

I was apologizing for using an image to show you the code because when I tried to post it here in the support website it did not display correctly.

You can use < code tag to post your code.

This is what happens? I used the return and code tags.

/////////////////////////////////////////

codevar getlat = localStorage&#46;getItem('singleLat');
var getlong = localStorage&#46;getItem('singleLong');
var comma = ",&quot
var latlong = getlat +""+ comma +""+ getlong;

var img_url="http:&#47;&#47;maps&#46;googleapis&#46;com&#47;maps&#47;api&#47;staticmap?size=250x250&maptype=hybridvar getlat = localStorage&#46;getItem('singleLat');
var getlong = localStorage&#46;getItem('singleLong');
var comma = ",&quot
var latlong = getlat +""+ comma +""+ getlong;

var img_url="http:&#47;&#47;maps&#46;googleapis&#46;com&#47;maps&#47;api&#47;staticmap?size=250x250&maptype=hybridvar getlat = localStorage.getItem('singleLat');
var getlong = localStorage.getItem('singleLong');
var comma = ",";
var latlong = getlat +""+ comma +""+ getlong;

var img_url="http://maps.googleapis.com/maps/api/s... getlat = localStorage.getItem('singleLat');
var getlong = localStorage.getItem('singleLong');
var comma = ",";
var latlong = getlat +""+ comma +""+ getlong;

var img_url="http://maps.googleapis.com/maps/api/s...";

document.getElementById("mapholder").innerHTML="";

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
} markers=size:mid%7Ccolor:red%7C"+latlong+"&sensor=false";

document.getElementById("mapholder").innerHTML="";

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
} amp;markers=size:mid%7Ccolor:red%7C"+latlong+"&sensor=false&quot

document&#46;getElementById("mapholder")&#46;innerHTML="<img src='"+img_url+"'>&quot

function showError(error)
{
switch(error&#46;code)
{
case error&#46;PERMISSION_DENIED:
x&#46;innerHTML="User denied the request for Geolocation&#46;"
break;
case error&#46;POSITION_UNAVAILABLE:
x&#46;innerHTML="Location information is unavailable&#46;"
break;
case error&#46;TIMEOUT:
x&#46;innerHTML="The request to get user location timed out&#46;"
break;
case error&#46;UNKNOWN_ERROR:
x&#46;innerHTML="An unknown error occurred&#46;"
break;
}
} markers=size:mid%7Ccolor:red%7C"+latlong+"&sensor=false&quot

document&#46;getElementById("mapholder")&#46;innerHTML="<img src='"+img_url+"'>&quot

function showError(error)
{
switch(error&#46;code)
{
case error&#46;PERMISSION_DENIED:
x&#46;innerHTML="User denied the request for Geolocation&#46;"
break;
case error&#46;POSITION_UNAVAILABLE:
x&#46;innerHTML="Location information is unavailable&#46;"
break;
case error&#46;TIMEOUT:
x&#46;innerHTML="The request to get user location timed out&#46;"
break;
case error&#46;UNKNOWN_ERROR:
x&#46;innerHTML="An unknown error occurred&#46;"
break;
}
} /code

Hello! Code on screenshot is different then code you've posted. Why do you need showError function if you don't call it?
1) Add on page Image component, set it's Dimension to the size of image you're expecting to get;
2) Add the following code on page Show event:
codevar getlat = localStorage&#46;getItem('singleLat');
var getlong = localStorage&#46;getItem('singleLong');
var latlong = getlat +","+ getlong;
var img = "http:&#47;&#47;maps&#46;googleapis&#46;com&#47;maps&#47;api&#47;staticmap?size=250x250&maptype=hybridvar getlat = localStorage.getItem('singleLat');
var getlong = localStorage.getItem('singleLong');
var latlong = getlat +","+ getlong;
var img = "http://maps.googleapis.com/maps/api/s... +"&sensor=false";
Appery("imageName").attr("src", img);amp;markers=size:mid%7Ccolor:red%7C"+latlong +"&sensor=false&quot
Appery("imageName")&#46;attr("src", img);/code
where imageName - Image component name.

Marina, Thank you so much for all of your help. I was just replying to the question on why i used a picture instead of t house e < code tags. My issue with the code wasn't because of appery not working it was when I tried to post it here on this site. The code in appery is working great! Also, I did delete the show error portion. Sorry to take up your time.

No worries, we're glad to help!