Event App and Maps

Event App and Maps

Awesome event app with Google Maps integration

Free!

(10)
Bengt Weiße

Bengt Weiße

Member since 2014

Details

Version:
1.0.1
Size:
1mb
Ionic:
1.0 beta 14,1.0.0,1.0.1
Platforms:
iOS, Android, Windows Phone
View ID:
d2835955
Released:
6 years ago
Updated:
5 years ago
Category:
Starters
Tags:
maps, event, events, google maps, google, sidemenu, pin, marker, round images, native map, dialer

ionic-starter-eventmaps

This is an addon starter template based on my ionic-starter-requirejs template for the Ionic Framework. It is a base event app with the usage of Google Maps (custom directive).

How to use this template

To use this, either create a new ionic project using the ionic node.js utility, or copy and paste this into an existing Cordova project.

Or use the files from ionic market: Go

It is a clean project without external dependencies!

Configuring the project

  1. go to the \www\app\controllers\ folder and open up the results.js with your favorite editor
  2. Edit the following line to include your Google API key:
$scope.apiKey = 'YOUR_API_KEY_HERE';

Trying out the app

  1. Issue ionic serve in your shell to try out the app in your regular local browser
  2. Issue ionic run android / ios in your shell to try out the app in a real device

Example data

Finding something in the demo content: Type in 'Berlin', 'Ber', 'Sports' or 'Düsseldorf'

Content

  • Handling possible backend-requests in services -> add your backend easy and fast!
  • mockdata
  • simulate backend connections with promises and timeouts -> you can check possible loading spinners and so on
  • simple and only a little bit scss styling
  • usage of ionRefresher, infiniteScroll, ionSpinner, Popups, Modals -> if you are new in ionic you can see all this in action
  • Custom little Google Maps directive to show map and markers (linked markers) -> no external library
  • open native maps app via detail page
  • open dialer for tel contact on detail page
  • open mail app for email contact on detail page
  • open browser for website on detail page
  • random images :)

Hey there! You'll need to log in before you can leave a comment here.

Lars Kinnunen

Lars Kinnunen   ·   6 years ago

Doesn't work for android, getting weird java errors when launching on android devices. works fine when running ionic serve tho.

Lars Kinnunen

Lars Kinnunen   ·   6 years ago

nevermind had to run ionic state restore and it worked.

Bengt Weiße

Bengt Weiße   ·   6 years ago

Thanks, for the last reply and I hope everything is working now.

Ddkf Dndn

Ddkf Dndn   ·   6 years ago

Thx for share free! You rules!

Bengt Weiße

Bengt Weiße   ·   6 years ago

thx... i will rule the world *mohahahahahahahaa

Rob Groenendaal

Rob Groenendaal   ·   6 years ago

5 stars from me. Only comment: I needed to update the api-key in results.html instead of the googleMaps.js file.

Bengt Weiße

Bengt Weiße   ·   6 years ago

thanks and look in the description of: "After that!!!: go in www folder then app and directives there open the googleMaps.js and change the Google Maps apiKey with yours" ;)

Nick Hui

Nick Hui   ·   5 years ago

thanks for sharing, great work!

lewis valenzuela

lewis valenzuela   ·   5 years ago

please how run your app in the map location show me the follow page geo://0,0?q=51.090209,6.585863(Special Event/Grevenbroich)&z=15

Bengt Weiße

Bengt Weiße   ·   5 years ago

I hope i understand you correctly: There are example-events in the app: https://github.com/KillerCodeMonkey/ionic-starter-eventmaps/blob/master/www/app/services/data.js you can change the infos (source of events) like you want. So you could add in your case lat and lng of your event: 51.090209 and 6.585863 And set Title, ... If you want to open the map-app of the phone you need to allow the geo-intent within the cordova-ehitelist-plugin: Add this in your config.xml: <!-- Allow geo: links to open maps --> <allow-intent href="geo:*" /> After that you could call an a-tag like this: <a href="geo://0,0?q=51.090209,6.585863(Special Event/Grevenbroich)&z=15" target="_system">open maps</a>

afo

afo   ·   5 years ago

Hi Bent, first of many thanks because your app is awesome! Anyhow, is there a way who users can add their own event ? It will be definitely my case... Please let me know!

Bengt Weiße

Bengt Weiße   ·   5 years ago

You can add this on your own --> like extending the event-service with a remove/add function. The add function pushs a new Event-Object to the events-array/ remove can splice the entry out of the array. For real apps you may want to connect an own backend as data source. All events are fixed in a special file

afo

afo   ·   5 years ago

I'll try to do it... (I'm very new within this environment) if you have some other example who can help me through the integration of this new features, just let me know. Thanks.

lewis valenzuela

lewis valenzuela   ·   5 years ago

i am tryig your app in my computer and when i click in an event, it doesnt show me the map indicating me the event, it shows me this url (geo://0,0?q=51.090209,6.585863(Special Event/Grevenbroich)&z=15 ) and an empty page. please could you show me what i am doing wrong and could you send me a tutorial video, i thanks a lot for your help

Bengt Weiße

Bengt Weiße   ·   5 years ago

@lewis valenzuela sorry for the late answer. The geo-tag is only working on phones

Everton Costa

Everton Costa   ·   5 years ago

Thanks for this awesome example! For me It seems me a little bit confused. If you allow me, I made some small changes to simplify the code. https://github.com/TomCosta/Ionic-Event-App-and-Maps/tree/readme-edits I would like to share here with your permission. For who needs in a simplest way.

Bengt Weiße

Bengt Weiße   ·   5 years ago

yeah you could do it, but i think your code is much more messed up^^. i build this on top of require.js, but you do not use require.js... I think your google-maps directive is broken (there is angular.module('XXXX') missing). and you are loading many external libs but you do not use them. Maybe it looks a bit messy, but my code is something like a base-structure even for complex apps --> that is why i splitted up all files. RequireJS has the advantages that you do not have to worry about in which order you load your scripts in your index.html and every file looks similas --> 1. load what you need like other files, libs and then the code it self. A little bit more state of the art would be browserify, but there you need to build your code to test it

Dan Gagliardi

Dan Gagliardi   ·   5 years ago

I created a New Ionic project, copied the files into the directory, built It and when I run emulate iOS, iOS simulator runs but I have a blank screen. Any suggestions on next steps?

Mika Koskiola

Mika Koskiola   ·   5 years ago

Hey Dan! I stumbled upon the same issue and the solution seems to be to edit the \www\app\directives\googleMaps.js isolate scope definition object local apiKey property to be apiKey: '@' instead of the actual key. After this you need to make sure that the \www\app\templates\results.html row <div id="map" data-tap-disabled="true" google-map style="height:100%; width: 100%;" api-key="YOUR_API_KEY" events="events"></div> includes your Google API key. This way you get rid of the "Error: $compile:iscp Invalid Isolate Scope Definition" error and map should load properly.

Mika Koskiola

Mika Koskiola   ·   5 years ago

Addition to my previous comment: You need to edit the \www\app\directives\googleMaps.js back to the original "@" value only if you've already done the task mentioned in the readme and added your own Google API key. No need to touch this unless you've edited it. Just replace the api-key value in the results.html and you're good to go :)

abin

abin   ·   5 years ago

hi bengt i have requirement for a similar kind of app. Can you help me.? Mail me : abinaustin007@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Oscar ytalPascual

Oscar ytalPascual   ·   5 years ago

Hi !, Thanks for this great start ionic app. I am using it to develop a project and i having a really hard time integrating ionic plugins or other third part libraries. For example, ionic plugin datepicker, i am not be able to get it work, i set the appropiate elements in main.js, and app.js, trying different ways and i get always require.js error or angular injector error. I also try use lokijs and the same. Could you give some advice, example, or general tutorial ? Note that datepicker and lokijs are both adapted to angular. Thanks a lot ! greetings

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

bishoy melek

bishoy melek   ·   4 years ago

I have made a modification to this app to be able to read Json data uing Ajax , If anyone needs it just send me an email on bishoymelekwadie@gmail.com

Diego Kouti

Diego Kouti   ·   4 years ago

Please you can send to me? dkouti@gmail.com

Niels

Niels   ·   4 years ago

Hi bishop melek. I would very much like to get your version with Json. niels@ffe-ye.dk

Peter T

Peter T   ·   4 years ago

Hello Bishoy, Would you please send your modification to be able to read Json data please (REST API). Thank you. - epicmargin[at]gmail.com

adam

adam   ·   4 years ago

Hi Bishot please can you send the modification. ankeliadam@gmail.com

Antonio Carlos Franco

Antonio Carlos Franco   ·   3 years ago

Please Bishot,help me would like to receive this change with api json integration for university studies. I could send it to my email carlosfp2012@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

adm

adm   ·   3 years ago

Oi Bishot, por favor, você pode enviar a modificação. 2011admuniverso@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

jhonatan

jhonatan   ·   3 years ago

Can you please help me by sending the correction?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

jhonatan

jhonatan   ·   3 years ago

Can you please help me by sending the correction?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

adm

adm   ·   3 years ago

Oi Bishot, por favor, você pode enviar a modificação. 2011admuniverso@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

bishoy melek

bishoy melek   ·   4 years ago

I have made a modification to this app to be able to read Json data uing Ajax , If anyone needs it just send me an email on bishoymelekwadie@gmail.com

Diego Kouti

Diego Kouti   ·   4 years ago

Please you can send to me? dkouti@gmail.com

Niels

Niels   ·   4 years ago

Hi bishop melek. I would very much like to get your version with Json. niels@ffe-ye.dk

Peter T

Peter T   ·   4 years ago

Hello Bishoy, Would you please send your modification to be able to read Json data please (REST API). Thank you. - epicmargin[at]gmail.com

adam

adam   ·   4 years ago

Hi Bishot please can you send the modification. ankeliadam@gmail.com

Antonio Carlos Franco

Antonio Carlos Franco   ·   3 years ago

Please Bishot,help me would like to receive this change with api json integration for university studies. I could send it to my email carlosfp2012@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Oscar ytalPascual

Oscar ytalPascual   ·   5 years ago

Hi !, Thanks for this great start ionic app. I am using it to develop a project and i having a really hard time integrating ionic plugins or other third part libraries. For example, ionic plugin datepicker, i am not be able to get it work, i set the appropiate elements in main.js, and app.js, trying different ways and i get always require.js error or angular injector error. I also try use lokijs and the same. Could you give some advice, example, or general tutorial ? Note that datepicker and lokijs are both adapted to angular. Thanks a lot ! greetings

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

abin

abin   ·   5 years ago

hi bengt i have requirement for a similar kind of app. Can you help me.? Mail me : abinaustin007@gmail.com

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Mika Koskiola

Mika Koskiola   ·   5 years ago

Addition to my previous comment: You need to edit the \www\app\directives\googleMaps.js back to the original "@" value only if you've already done the task mentioned in the readme and added your own Google API key. No need to touch this unless you've edited it. Just replace the api-key value in the results.html and you're good to go :)

Mika Koskiola

Mika Koskiola   ·   5 years ago

Hey Dan! I stumbled upon the same issue and the solution seems to be to edit the \www\app\directives\googleMaps.js isolate scope definition object local apiKey property to be apiKey: '@' instead of the actual key. After this you need to make sure that the \www\app\templates\results.html row <div id="map" data-tap-disabled="true" google-map style="height:100%; width: 100%;" api-key="YOUR_API_KEY" events="events"></div> includes your Google API key. This way you get rid of the "Error: $compile:iscp Invalid Isolate Scope Definition" error and map should load properly.

Dan Gagliardi

Dan Gagliardi   ·   5 years ago

I created a New Ionic project, copied the files into the directory, built It and when I run emulate iOS, iOS simulator runs but I have a blank screen. Any suggestions on next steps?

Bengt Weiße

Bengt Weiße   ·   5 years ago

yeah you could do it, but i think your code is much more messed up^^. i build this on top of require.js, but you do not use require.js... I think your google-maps directive is broken (there is angular.module('XXXX') missing). and you are loading many external libs but you do not use them. Maybe it looks a bit messy, but my code is something like a base-structure even for complex apps --> that is why i splitted up all files. RequireJS has the advantages that you do not have to worry about in which order you load your scripts in your index.html and every file looks similas --> 1. load what you need like other files, libs and then the code it self. A little bit more state of the art would be browserify, but there you need to build your code to test it

Everton Costa

Everton Costa   ·   5 years ago

Thanks for this awesome example! For me It seems me a little bit confused. If you allow me, I made some small changes to simplify the code. https://github.com/TomCosta/Ionic-Event-App-and-Maps/tree/readme-edits I would like to share here with your permission. For who needs in a simplest way.

Bengt Weiße

Bengt Weiße   ·   5 years ago

@lewis valenzuela sorry for the late answer. The geo-tag is only working on phones

lewis valenzuela

lewis valenzuela   ·   5 years ago

i am tryig your app in my computer and when i click in an event, it doesnt show me the map indicating me the event, it shows me this url (geo://0,0?q=51.090209,6.585863(Special Event/Grevenbroich)&z=15 ) and an empty page. please could you show me what i am doing wrong and could you send me a tutorial video, i thanks a lot for your help

Lars Kinnunen

Lars Kinnunen   ·   6 years ago

nevermind had to run ionic state restore and it worked.

Bengt Weiße

Bengt Weiße   ·   5 years ago

You can add this on your own --> like extending the event-service with a remove/add function. The add function pushs a new Event-Object to the events-array/ remove can splice the entry out of the array. For real apps you may want to connect an own backend as data source. All events are fixed in a special file

afo

afo   ·   5 years ago

Hi Bent, first of many thanks because your app is awesome! Anyhow, is there a way who users can add their own event ? It will be definitely my case... Please let me know!

Bengt Weiße

Bengt Weiße   ·   5 years ago

I hope i understand you correctly: There are example-events in the app: https://github.com/KillerCodeMonkey/ionic-starter-eventmaps/blob/master/www/app/services/data.js you can change the infos (source of events) like you want. So you could add in your case lat and lng of your event: 51.090209 and 6.585863 And set Title, ... If you want to open the map-app of the phone you need to allow the geo-intent within the cordova-ehitelist-plugin: Add this in your config.xml: <!-- Allow geo: links to open maps --> <allow-intent href="geo:*" /> After that you could call an a-tag like this: <a href="geo://0,0?q=51.090209,6.585863(Special Event/Grevenbroich)&z=15" target="_system">open maps</a>

lewis valenzuela

lewis valenzuela   ·   5 years ago

please how run your app in the map location show me the follow page geo://0,0?q=51.090209,6.585863(Special Event/Grevenbroich)&z=15

Nick Hui

Nick Hui   ·   5 years ago

thanks for sharing, great work!

Bengt Weiße

Bengt Weiße   ·   6 years ago

thanks and look in the description of: "After that!!!: go in www folder then app and directives there open the googleMaps.js and change the Google Maps apiKey with yours" ;)

Rob Groenendaal

Rob Groenendaal   ·   6 years ago

5 stars from me. Only comment: I needed to update the api-key in results.html instead of the googleMaps.js file.

Bengt Weiße

Bengt Weiße   ·   6 years ago

thx... i will rule the world *mohahahahahahahaa

Ddkf Dndn

Ddkf Dndn   ·   6 years ago

Thx for share free! You rules!

Bengt Weiße

Bengt Weiße   ·   6 years ago

Thanks, for the last reply and I hope everything is working now.

Lars Kinnunen

Lars Kinnunen   ·   6 years ago

Doesn't work for android, getting weird java errors when launching on android devices. works fine when running ionic serve tho.

afo

afo   ·   5 years ago

I'll try to do it... (I'm very new within this environment) if you have some other example who can help me through the integration of this new features, just let me know. Thanks.

Hey there! You'll need to log in before you can leave a rating here.

Rob Groenendaal   ·     ·   6 years ago

Good maps example

Nick Hui   ·     ·   5 years ago

excellent example!

Said Talbi   ·     ·   5 years ago

Nice design, thanks for sharing

afo   ·     ·   5 years ago

excellent app example, many thanks!!

Everton Costa   ·     ·   5 years ago

Nice example of application! A little bit messed code... Thanks anyway!

Mika Koskiola   ·     ·   5 years ago

Great starter but needs some fine tuning regarding the readme, description, instructions & the actual implementation. Using the starter per instructions leads to Error: $compile:iscp Invalid Isolate Scope Definition which is solved by minor edits. Nevertheless a great starter overall!

Oscar ytalPascual   ·     ·   5 years ago

Great app, but complex to use other plugins, maybe

Sangram   ·     ·   5 years ago

Great Work :)

Sangram   ·     ·   5 years ago

Great Work :)

Axel Minet   ·     ·   3 years ago

great example!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Axel Minet    ·     ·   3 years ago

great example!

Sangram    ·     ·   5 years ago

Great Work :)

Sangram    ·     ·   5 years ago

Great Work :)

Oscar ytalPascual    ·     ·   5 years ago

Great app, but complex to use other plugins, maybe

Mika Koskiola    ·     ·   5 years ago

Great starter but needs some fine tuning regarding the readme, description, instructions & the actual implementation. Using the starter per instructions leads to Error: $compile:iscp Invalid Isolate Scope Definition which is solved by minor edits. Nevertheless a great starter overall!

Everton Costa    ·     ·   5 years ago

Nice example of application! A little bit messed code... Thanks anyway!

afo    ·     ·   5 years ago

excellent app example, many thanks!!

Said Talbi    ·     ·   5 years ago

Nice design, thanks for sharing

Nick Hui    ·     ·   5 years ago

excellent example!

Rob Groenendaal    ·     ·   6 years ago

Good maps example