Forum | Appery.io

References:
ul
lihttps://developers.google.com/maps/do.../li
lihttps://developers.google.com/maps/do... /li
lihttp://webcache.googleusercontent.com.../li
/ul

I was pleased to see that Appery already has a component for Google maps. In fact, I went through the Appery tutorial at http://docs.appery.io/tutorials/build... because it closely resembles the actual code provided by Google. This tutorial helped me to partially understand how Appery has built its own map component to facilitate use by its users.

I would like to use the eminterpolate()/em static method in the Google Maps API (v3) Geometry Library -- a method which is in the "spherical" namespace. Please see the references, above, for detailed information on this.

After some testing, I'm guessing that the Geometry Library wasn't included by default in Appery along with the Google Maps API (component). I could be wrong.

Since Appery automatically includes the Google Maps component, I'm assuming that the Maps API JavaScript library code"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true_or_false"/code is already added somewhere.

If my assumption that the Geometry Library not being already included is correct and if I understand a few other things, it's just a question of modifying this line to: code"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true_or_false&libraries=geometry"/code

Or, for all I know, there may be another best practice that I should be using while developing within the Appery framework. I'm a little shy to move forward since I'm having to implement things on top of Appery's existing framework.

Could we open up a small dialogue on this here? My questions are, is the Geometry library already included with the Appery Google Map Component? If it is not, what is the best way to start using this library? What should I do? Could you provide an example of what code I should add and where I should add it in order that I might begin using static methods such as eminterpolate()/em in my Appery client Javascript code?

Hi Jamie,

Please follow these steps:
ol
liOpen "App settings"./li

liFill "User-defined resources" input by following url: http://prntscr.com/38b00k/direct/li
precode
https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true
/code/pre
liOpen your application./li

liOpen console./li

liType there code below: http://prntscr.com/38b0y0/direct/li
precode
google.maps.geometry.spherical.computeDistanceBetween
/code/pre
That's all./ol

Thank you for your quick response. It's good to know how to require a Javascript library in Appery.

I've gone through the steps you mentioned, above, and ran into the next hiccup: using the Appery map component with this library gives the following message - "Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors." This error is displayed in the console. It's an error that is to be expected since I imagine the Appery map component makes reference to the library somewhere.

My instincts therefore tell me then that I should be developing my map app without the use of Appery's map component. In other words, I'll be doing things "from scratch." I'm actually okay with that.

The problem I'm now having is in accessing Appery components in my window. For example, Google's map API sample code references codemap = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);/code.

If I recall correctly, we can't quite use the whole emdocument.getElementById('')/em routine and must instead use emAppery("componentName")/em. Still, I am having difficulty getting a map to appear in an Appery component.

If you do not mind, I would like to do a super simple set of code, just to get started. I think that once a proof of concept is done, I should be good to go from there. I would like to simply display a Google map in a component without the use of the Appery map component.

Google provides sample code for this at https://developers.google.com/maps/do...

The procedure that I've taken is to:
ul
liFollow the steps you provided, above, to load the extended Google Maps API library (thank you!)/li
liCreate an Appery HTML component in one of my Appery windows named "mapcanvas", set to the default emType/em of "html"/li
liCreate a Javascript named "mapTest" and paste some of the aforementioned sample Google code in (see below)/li
liCall my "initialize" function via an Appery page load event/li
liCross my fingers and hope things work and fiddle with things to try and get them to work (see below)/li
/ul

pre
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('mapcanvas'),
mapOptions);
}
/pre

So, this didn't work. I received an "Uncaught TypeError: Cannot read property 'offsetWidth' of null" error in the Console. I take this to mean that the code is not "seeing" the emmapcanvas/em component name I specified in emdocument.getElementById/em

Okay, so let's try things the Appery way:

pre
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(Appery('mapcanvas'),
mapOptions);
}
/pre

Now I receive an "Uncaught TypeError: Cannot set property 'position' of undefined" error. Again, I think that this means the code isn't "seeing" emmapcanvas/em correctly.

Thinking that maybe the HTML component isn't the component to use, I also tried a label component but received the same behaviour.

Thinking that perhaps the code is trying to access a component that has not quite finished rendering in the window, I created a "button" that calls the "initialize" function. Nope, that wasn't it either.

Could you walk me through what I'm doing wrong here?

My entire Appery app is available (shared) to Appery support still from a previous GetSatisfaction query under the name "codebeige".

Hi Jamie,

You can use selector by ID:predocument.getElementById("screenName_googlemapName")/preWhere 'screenName' is a page name,
'googlemapName' is a map component name.

Hi Katya,

Oh my goodness... it worked! I think that we can consider this case as "closed." Thanks to both Katya & Illya and the rest of the Appery team.

So, for other readers in the future, here's what I (we) did to get this working:

1. Called the extended Google Maps Javascript API library using Illya's tip, above.

2. Created an Appery component (in this case it was an HTML component named "mapcanvas") on an Appery screen (in this case I put it right on emstartScreen/em).

3. Called my Javascript function (in this case it's called "initialize") as an Appery event on page load.

4. And of course you need the code in the Appery Javascript scripts section. It tells the Google API library to populate the aforementioned Appery component with a simple map:

   pre
   var map;
   function initialize() {
   var mapOptions = {
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644)
   };
   map = new google.maps.Map(document.getElementById('startScreen_mapcanvas'),
   mapOptions);
   }
   /pre

   Of course, I didn't actually use any of Google's extended features in this example, but I intend to. This was just a proof of concept and could have been done a lot more easily using Appery's map component (see references at the very beginning of this GetSatisfaction entry).

Jamie,

Thank you for sharing this! Glad it helped.