Use variables in static googlemap string

Tue Jul 02, 2013 5:55 am

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.

Tue Jul 02, 2013 6:16 am

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

Tue Jul 02, 2013 9:54 pm

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.

Wed Jul 03, 2013 6:22 am

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?

Thu Jul 25, 2013 12:13 am

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.

Thu Jul 25, 2013 3:55 pm

You can use < code tag to post your code.

Sat Jul 27, 2013 10:17 pm

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

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

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

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

var img_url="http://maps.googleapis.com/maps/api/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.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>&quot

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&quot

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

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;
}
} /code

Mon Jul 29, 2013 9:31 am

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.getItem('singleLat');
var getlong = localStorage.getItem('singleLong');
var latlong = getlat +","+ getlong;
var img = "http://maps.googleapis.com/maps/api/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").attr("src", img);/code
where imageName - Image component name.

Mon Jul 29, 2013 2:39 pm

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.

Mon Jul 29, 2013 2:47 pm

No worries, we're glad to help!