tutorial for using Google Maps and Markers in Ionic

This forum contains topics that were moved from Get Satisfaction
Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

tutorial for using Google Maps and Markers in Ionic

Post by Andy Parker »

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?

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

tutorial for using Google Maps and Markers in Ionic

Post by Andy Parker »

found this in your old documentation :-)

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

Amr Osman
Posts: 0
Joined: Sat Nov 14, 2015 11:58 am

tutorial for using Google Maps and Markers in Ionic

Post by Amr Osman »

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

ch
Posts: 0
Joined: Wed Dec 23, 2015 3:48 pm

tutorial for using Google Maps and Markers in Ionic

Post by ch »

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

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

tutorial for using Google Maps and Markers in Ionic

Post by Galyna Abramovych »

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

ch
Posts: 0
Joined: Wed Dec 23, 2015 3:48 pm

tutorial for using Google Maps and Markers in Ionic

Post by ch »

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.

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

tutorial for using Google Maps and Markers in Ionic

Post by Andy Parker »

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%

ch
Posts: 0
Joined: Wed Dec 23, 2015 3:48 pm

tutorial for using Google Maps and Markers in Ionic

Post by ch »

Thanks for great support!

ch
Posts: 0
Joined: Wed Dec 23, 2015 3:48 pm

tutorial for using Google Maps and Markers in Ionic

Post by ch »

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.

ch
Posts: 0
Joined: Wed Dec 23, 2015 3:48 pm

tutorial for using Google Maps and Markers in Ionic

Post by ch »

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

Post Reply