Google map component

Moderator: Support

kevinmcisaac
Posts: 37
Joined: Mon Oct 05, 2020 8:27 am

Google map component

Post 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.
Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Google map component

Post 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

kevinmcisaac
Posts: 37
Joined: Mon Oct 05, 2020 8:27 am

Re: Google map component

Post 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]
Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Google map component

Post 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.

kevinmcisaac
Posts: 37
Joined: Mon Oct 05, 2020 8:27 am

Re: Google map component

Post by kevinmcisaac »

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

Galyna Abramovych
Site Admin
Posts: 68
Joined: Tue Mar 22, 2016 6:03 pm

Re: Google map component

Post by Galyna Abramovych »

Dear Kevin,

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

kevinmcisaac
Posts: 37
Joined: Mon Oct 05, 2020 8:27 am

Re: Google map component

Post 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);
mlevins
Posts: 1
Joined: Thu Jan 21, 2021 3:43 pm

Re: Google map component

Post 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

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Google map component

Post by Serhii Kulibaba »

Hello,

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

Post Reply