How to add custom icons for Geolocation Marker & Multiple Location Points? I will pay for a good answer.
Posted: Tue Mar 12, 2013 4:49 pm
Don, we are working on it...
Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
Don, we are working on it...
There were some problems, we've fixed. Please try to open app again.
Hi Katya,
The app is no longer freezing and displaying the white page...
but there is also still no mapping working.
Looking at the JS, it is all messed up now:
precode
googleMapDiv = Tiggzi("googlemap1_2").get(0);
$googleMapDiv = $(googleMapDiv);
mapWidth = $googleMapDiv.width();
mapHeight = $googleMapDiv.height();

/Adjust zoom to cover all marks/
function log2(m) {
return ((Math.log(m)) / (Math.log(2)));
};
var maxLatitude = -90,
minLatitude = 90,
maxLongitude = -180,
minLongitude = 180,
location, widthForZoom0 = 256,
/map width/height = 256px for zoom = 0/
mapWidth, mapHeight, mapDivZoom, mapZoom, resultZoom, googleMapDiv, $googleMapDiv, mapOptions, map, i, sfLatlng, marker;
for (i = 0; i < value.length; i++) {
location = value['location'];
maxLatitude = location['latitude'] > maxLatitude ? location['latitude'] : maxLatitude;
minLatitude = location['latitude'] < minLatitude ? location['latitude'] : minLatitude;
maxLongitude = location['longitude'] > maxLongitude ? location['longitude'] : maxLongitude;
minLongitude = location['longitude'] < minLongitude ? location['longitude'] : minLongitude;
};
mapZoom = log2(1 / Math.max(Math.abs((maxLatitude - minLatitude) / 180), Math.abs((maxLongitude - minLongitude) / 360))); /zoom for current map piece/
mapDivZoom = log2(Math.min(mapWidth, mapHeight) / widthForZoom0); /zoom for current size of map div/
resultZoom = Math.floor(mapDivZoom + mapZoom); /result map zoom/
if (resultZoom > 15) {
resultZoom = 15;
}
if (resultZoom < 0) {
resultZoom = 0;
}
mapOptions = {
zoom: resultZoom,
center: new google.maps.LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

/Add marks to screen/
map = new google.maps.Map(googleMapDiv, mapOptions);
for (i = 0; i < value.length; i++) {
sfLatlng = new google.maps.LatLng(value['location']['latitude'], value['location']['longitude']);
marker = new google.maps.Marker({
position: sfLatlng,
map: map
});
};
/code/pre
Hi Don,
Yes, this is a known editor problem. There should be new lines instead of code"
"/code
Replace them manually and mapping should work.
Replaced 
 with returns and now the app returns the white page again and hangs.
Hello!
You should change mapping on LocationMap page ( REST_4locations Response) - map LOCATION to JavaScript mapJS, not LOCATIONS
Here is the JS code:
code googleMapDiv = Tiggzi("googlemap1_2").get(0);
$googleMapDiv = $(googleMapDiv);
mapWidth = $googleMapDiv.width();
mapHeight = $googleMapDiv.height(); /Adjust zoom to cover all marks/
Code: Select all
function log2(m) {
return ((Math.log(m)) / (Math.log(2)));
};
var maxLatitude = -90,
minLatitude = 90,
maxLongitude = -180,
minLongitude = 180,
location, widthForZoom0 = 256,
/*map width/height = 256px for zoom = 0*/
mapWidth, mapHeight, mapDivZoom, mapZoom, resultZoom, googleMapDiv, $googleMapDiv, mapOptions, map, i, sfLatlng, marker;
for (i = 0; i < value.length; i++) {
location = value[i];
maxLatitude = +location['LATITUDE'] > maxLatitude ? +location['LATITUDE'] : maxLatitude;
minLatitude = +location['LATITUDE'] < minLatitude ? +location['LATITUDE'] : minLatitude;
maxLongitude = +location['LONGITUDE'] > maxLongitude ? +location['LONGITUDE'] : maxLongitude;
minLongitude = +location['LONGITUDE'] < minLongitude ? +location['LONGITUDE'] : minLongitude;
};
mapZoom = log2(1 / Math.max(Math.abs((maxLatitude - minLatitude) / 180), Math.abs((maxLongitude - minLongitude) / 360))); /*zoom for current map piece*/
mapDivZoom = log2(Math.min(mapWidth, mapHeight) / widthForZoom0); /*zoom for current size of map div*/
resultZoom = Math.floor(mapDivZoom + mapZoom); /*result map zoom*/
if (resultZoom > 15) {
resultZoom = 15;
}
if (resultZoom < 0) {
resultZoom = 0;
}
mapOptions = {
zoom: resultZoom,
center: new google.maps.LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}; /*Add marks to screen*/
map = new google.maps.Map(googleMapDiv, mapOptions);
for (i = 0; i < value.length; i++) {
sfLatlng = new google.maps.LatLng(value[i]['LATITUDE'], value[i]['LONGITUDE']);
marker = new google.maps.Marker({
position: sfLatlng,
map: map
});
}; /code
Sorry, as soon as the XML is returned, I still get a blank white page and endless wait circle.
If I remove the JS, the page returns correctly, including the webservice response/locations being populated.
Hello! Did you follow instructions I've suggested above?
Yes.
I have shared the app with a href="mailto:support@tiggzi.com" rel="nofollow"support@tiggzi.com/a
You should delete mapping from LOCATIONS and replace code with the code I've suggested above https://getsatisfaction.com/tiggzi/to...
You have incorrect JS