Google Maps Pin Points to web address and drop down menu to do same.

[Ryan Raymond]

Could anyone point me in the right direction I have searched but not sure if anything I have found will help, this is what I need to do:

A user from the Start page clicks the Fire Station list, which will take the user to a page with an option to link to Google maps or a drop down menu with a list of Fire Stations.

Query #1

What I would like to achieve is, If the user clicks the Google Maps link it opens Google Maps locates the users location so they can see their closest fire station as a PIN POINT on the map, if the user then clicks one of the PIN POINTS to one of the Fire Stations it will open the Fire Stations web page keeping it within the app.

Query #2

Going back to the Drop down menu mentioned above, this drop down menu needs to have a list of 96 stations so when a user clicks a station it will open the Fire Station web site URL, I don't want an on-line database so can I just use a form tag to do this or is there another way?

Many thanks in advance and I hope someone can help, I think the drop down menu is straight forward it's just the Google Maps query I need to work out.

I am new to this Appery tool but I have some web design experience but a little out of touch with it and need to get back into it again.

Ryan

[Kateryna Grynko]

Hi Ryan,

It's possible. Here are two steps to do this:

1. Place markers on map

2. Use device-service for geolocation to set marker of current user position.

   Then we face some problem. Of course you can manually add all 96 items in dropdown menu, but this won't be effective. First, there will be a problem when searching - you would need to sort list beforehand. Second, 96 items are a big number, especially because dropdown is realized by non-standard means of OS. Probably it's better to implement two or three-stage selection based on clarification by alphabetical order. With complete list storage, in database or in JavaScript object resources.

[Ryan Raymond]

Hi Katya,

Firstly How do I place the markers on the map any guidance would be appreciated, do I need to set up a Google Maps API on my account and add the markers on my Google account and then call it from the app? I'm not sure how this is done.

Secondly you are right I can easily add the 96 stations into different areas which is what I was going to do anyway to make it easier adding the 96 stations is not a problem as I created an app in Dreamweaver recently and I created an HTML form with all stations, but how do I once clicked can I send that click to a url?

Many thanks
Ryan

[Ryan Raymond]

Just an update, I have managed create a dynamic drop down list following the tutorial on your site so I have got the first drop down with district areas select an area and it gives me the stations in that district which is brilliant and works perfect.

what I need to do now is when that station is selected to hit the submit button and for it to open an external URL within the app for each station, any ideas where I put the urls for each station?

Many thanks
Ryan

[Maryna Brodina]

Hello! If we understand you correctly you have two dynamic select with district and stations. After you select the station you need to open station site. In station select value save URL you need to open. When you click on submit button open that URL in childBrowser. To do that on button click run the following code:
codevar cb, url = Appery("stationsSelect").val();
if(window.plugins) {
cb = window.plugins.childBrowser;
}
if (cb != null) {
cb.showWebPage(url);
}
else {
window.open(url);
};/code
where stationsSelect - name of select with stations

If in station value there is no URL, but station name for example - create object where station name is corresponding to site URL
codevar stationsUrl = {"station1": "http://site1.com", "station2": "http://site2.com", "station3": "http://site3.com"};/code
then instead of codeurl = Appery("stationsSelect").val()/code should be codeurl = stationsUrl[Appery("stationsSelect").val()]/code

2) no need to have Google account to add map and markers. You would only need marker coordinates. You can use the following function:
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
});
}/code
to add markers call the function codesetMarker("mapComponentName", 37.0123, -122.1234);/code

[Ryan Raymond]

Hi Marina,

I have selected the Submit button on the station form, Opened Events Selected CLICK from Events and Run JavaScript from ACTION and added the following code:

precode

var cb, url = stationsUrl[Appery("stationList").val()];
if(window.plugins) {
cb = window.plugins.childBrowser;
}
if (cb != null) {
cb.showWebPage(url);
}
else {
window.open(url);
};

var stationsUrl = {"Aviemore": "https://mydisplay.org/live/AvailabilityScreenSaver.aspx?id=A4", "Grantown": "https://mydisplay.org/live/AvailabilityScreenSaver.aspx?id=A3", "Kingussie": "https://mydisplay.org/live/AvailabilityScreenSaver.aspx?id=A5"};

/code/pre

The Code for the Districts Select Menu is as follows:

precode

var selectedValue = this.value;

var data = { 'Badenoch': ['Aviemore', 'Kingussie', 'Grantown'],
'InvernessNairn': ['Inverness', 'Beauly', 'Nairn']
};

var dropDown = $('[name=stationList]');
dropDown.html('');
var newData = data[selectedValue];

for(i = 0; i < newData&#46;length; i++) {
dropDown&#46;append('<option value="' + newData + i + '">' + newData + '<&#47;option>');
}
dropDown&#46;selectmenu('refresh');

/code/pre

The dynamic drop downs work perfect, but when I click Submit it does not do anything, Am I missing something or is there a comma out of place?

Sorry for all the questions, just trying to get to grips with this hand coding.

Regards
Ryan

[Maryna Brodina]

Are there any errors in console when you click Submit button?

[Ryan Raymond]

No errors at all, just does not do anything when you click the submit button.

[Maryna Brodina]

Please replase code codedropDown&#46;append('<option value="' + newData + i + '">' + newData + '<&#47;option>');/code with the following codedropDown&#46;append('<option value="' + newData + '">' + newData + '<&#47;option>');/code

[Ryan Raymond]

Hi Marina,

Sorry this doesnt seem to work either, no errors and upon button click nothing happens.

I'm looking at it too and can not see why this is not working.