Page 1 of 1

Google map component

Posted: Thu Oct 22, 2020 9:23 am
by kevinmcisaac

Great component! I was able to get this set up and working in less than a min! Two questions:

  1. Do you have example of how I can draw a track over the map. I have a set of lat/lon coordinate that defines a (flight) path and wanted to show that over the map.
  2. When this runs on a mobile device is it possible to use the devices API key, i.e., so I don't need to provide mine and get charged. I noticed the Native GeoLocation works this way.

Re: Google map component

Posted: Thu Oct 22, 2020 8:45 pm
by Serhii Kulibaba

Hello,

Please see this example on how to draw a track on the map https://blog.appery.io/2015/12/how-to-i ... -tracking/

The API key is related to the application, not the device, so there is no possibility to avoid usage your Google account


Re: Google map component

Posted: Thu Oct 22, 2020 10:44 pm
by kevinmcisaac

Great example. Unfortunately this is from 2015 and the platfrom APIs have changed. I use the code

Code: Select all

var map = Apperyio("myMap").gmap;

and got this error

[quote]ERROR in src/app/Map/Map.ts:1233:19 - error TS2663: Cannot find name 'Apperyio'. Did you mean the instance member 'this.Apperyio'?

1233 var map = Apperyio("myMap").gmap;

Code: Select all


I tried 

    var map = this.Apperyio("myMap").gmap;

[quote]
ERROR in src/app/Map/Map.ts:1233:19 - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'ApperyioHelperService' has no compatible call signatures.

1233         var map = this.Apperyio("myMap").gmap;
                       ~~~~~~~~~~~~~~~~~~~~~~
[/quote]

Re: Google map component

Posted: Mon Oct 26, 2020 1:41 pm
by Serhii Kulibaba

This example works for JQM projects, but it seems you use Ionic 4. Sorry, but we don't have an example for Ionic 4.

Please search online for an appropriate solution. Also I can only recommend you consider purchasing our Support Pack service to get professional help with this issue: https://appery.io/services.
This service includes app debugging as well as any other custom app help. If this particular issue turns out to be an Appery.io bug, we will credit back the hours spent on this issue and you will be able to use them toward another issue.


Re: Google map component

Posted: Tue Oct 27, 2020 5:06 am
by kevinmcisaac

Serhii
I've already purchased that service. Can you forward my question to the advisory team. Thank you.


Re: Google map component

Posted: Tue Oct 27, 2020 3:38 pm
by Galyna Abramovych

Dear Kevin,

Please find the answer from your assigned developer in your inbox.


Re: Google map component

Posted: Fri Oct 30, 2020 1:05 am
by kevinmcisaac

Got the answer. Tt turned out to be very simple.

I recommend you document this, however incase other want to know now, in IONIC

1) Under the page's CODE tab, create a new variable map of type any.
2) On the map component add a Map Ready event with the following type script.

Code: Select all

this.map = event; 
const samplePath = [
    { lat: 72.310446, lng: 4.591263 },
    { lat: 69.803242, lng: -1.741088 },
    { lat: 64.045288, lng: -1.037493 },
    { lat: 55.618073, lng: -15.812977 },
];

const track = new google.maps.Polyline({
    path: samplePath,
    geodesic: true,
    strokeColor: '#ff0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: this.map,
});

const bounds = new google.maps.LatLngBounds();
for (let item of samplePath) {
    bounds.extend(new google.maps.LatLng(item.lat, item.lng));
}
this.map.fitBounds(bounds);

Re: Google map component

Posted: Thu Jan 21, 2021 7:29 pm
by mlevins

I am receiving an error "Cannot find name 'google'" when I am trying to run the typescript to plot a polyline [provided by kevinmcisaac (seen above)]. The error is on each line that runs a google library function (e.g. new google.maps.Polyline) So I assume that my app/page does not have the library declared but I'm unsure how to fix this.

The map page of my app was created following this tutorial: https://docs.appery.io/docs/ionic-4-goo ... s-tutorial

Any help is appreciated,

Thanks


Re: Google map component

Posted: Mon Jan 25, 2021 1:18 pm
by Serhii Kulibaba

Hello,

Have you solved the issue? I see you said that in the ticket #44066