Forum | Appery.io

Hi there,

I can assure you all the code I have placed as it was so very straight forward was placed in the GUI and NOT the js code page itself I was just sending a screen shot to show you that it is different in the developer in chrome than it was in the project, when I took that screen shot it was the first time I've ever opened it.

So I just need to copy and paste my JavaScript into say a notepad then carry out instructions from your screenshots.

Ryan

Hi Ryan,

Create a separate JS-asset. Paste your code as functions then call them from the event handlers of your application.

Modification of code pages can cause unpredictable consequences. This opportunity should be used very carefully and only when other methods do not solve the problem.

Well thank goodness for that.

I copied and pasted my JS from livedisplay.html into a new JS file to back it up, carried out the steps you mentioned above which reset all the JS files.

Opend my Live Display page and to my surprise my javascript and all stations for the drop downs were still in place, I have tested it and it is working just fine so Happy Days, many thanks for your help on this issue.

Now onto the Google Maps for station locations.

Ryan

I am now working on the Google maps and wanting to display each of the 92 stations as Pin Points on the map.

From the code you showed above where do I actually place these 2 pieces of code?

I have so far created the Map Page which I have 1 location set on the right hand side of the project window, I have also managed to set the Geolocation of the users device, this works fine when you open the Map page, so that is set up so i just need to know where to place the 2 pieces of code stated above.

Many thanks
Ryan

Hello! Run the following code on page Show event:
codefunction setMarker (mapName, lat, lng){
map = Appery(mapName).gmap;
var newPoint = new google.maps.LatLng(lat, lng);
//var iconUrl = '........';
var marker = new google.maps.Marker({
position: newPoint,
map: map//,
//icon: iconUrl
});
}
function addMarkers(mapName) {
setMarker(mapName, 57.485951, -4.222131);
setMarker(mapName, 37.485951, -4.222131);
setMarker(mapName, 47.485951, -4.222131);
}
function addMarkersAfterMapReady(mapName) {
if (!Appery(mapName).gmap) {
setTimeout(function () {addMarkersAfterMapReady(mapName)}, 100);
} else {
addMarkers(mapName);
}
}

addMarkersAfterMapReady("mapName"); //put here your map name instead of mapName/code

Ok thank you for that, I was trying to add a text box for each station and added this to the code but I dont think it is correct:

code

setMarker(stationMap, 57.198269, -3.828240, title: "Aviemore");

/code

I got this from your Custom Icons tutorial, however I'm not needing a custom icon for each station at the moment I just need a text box with information and a web site link to the station is this possible?

Thank you so much for all your help you have been great.

Ryan

Hi Ryan,

There is possible to specify a title for the marker. Here is a sample call:precodefunction setMarker(mapName, lat, lng, title) {
map = Appery(mapName).gmap;
var newPoint = new google.maps.LatLng(lat, lng);
//var iconUrl = '........';
var marker = new google.maps.Marker({
position: newPoint,
title: title || "",
map: map //,
//icon: iconUrl
});
}

function addMarkers(mapName) {
setMarker(mapName, 57.485951, -4.222131, "One");
setMarker(mapName, 37.485951, -4.222131, "Two");
setMarker(mapName, 47.485951, -4.222131, "Three");
}

function addMarkersAfterMapReady(mapName) {
if (!Appery(mapName).gmap) {
setTimeout(function() {
addMarkersAfterMapReady(mapName)
}, 100);
} else {
addMarkers(mapName);
}
}

addMarkersAfterMapReady("mapName"); //put here your map name instead of mapName/code/pre