Forum | Appery.io

Hi team,

I'm converting apps to ionic at the moment as this seems to be the way forward.

However, the major hurdle is using google map markers with ionic.

I cannot seem to find any documentation on the appery site that can help me solve the issue of creating adhoc markers, deleting them, refreshing the map when it changes size....etc

I'm at a standstill until I figure this out. Ionic is a completely different beast to JQM as you can't seem to reference google maps easily.

the examples on the internet all seem to show using maps within an HTML block, but as google maps is an Appery addin, shouldn't we be able to use that?

So far I've managed to get the standard single marker showing a position. What I need is to add a lot of markers (from an array) and have a function called when the marker is clicked - there's nothing on Appery to help me do that unfortunately.

Can you show us how this is done so it's documented here at least please?

found this in your old documentation

https://devcenter2.appery.io/tutorial...

I got tired for searching a topic talking about using of google map in ionic .
I am following until the END.

The google map functionality and how to use it lacks good guidance and examples. only current example show only a jquery example and all other don't give enough guidance for a beginner. Then there are some references to "here the appery team have done an exampel" but there is nog example....

Hello,

Here is an update on the topic.
Please can check this link for using the Google Maps component in an Ionic app: https://docs.appery.io/docs/appbuilde...

Hi Galyna,

Great!
Thanks!

One more question, how to set the sizs of the map? In one tutorial for ionic there was an instruction to set a classname and change size in CSS but it don't work for me. I want the map to cover all page.

Simply place the map inside an html object, (change it to a div in the html options) then use CSS to set the height and width of the div component.
Then simply set the CSS for the map as follows :
height: 100%
width: 100%

Thanks for great support!

One more question.
I can't get Google map work with tabs

I want to have a page with two tabs where one tab show a map and one show a list but as soon as i put a google map in the tab it dissapears even if I try to use html-div and set 100% height and width. I have tried serveral variants.

Do you have a quide for how to get a google map work with tabs in this way?

It also seems to be some bugs when moving components from and to tabs.

Maybe there is a bug when using tabs with google map. The width can be set by using % but the height require px.

If I set width: 100% and height: 100% the height is unaffected but if I set the height to 350px it change the height of the map within the tab