Lars Kinnunen
Doesn't work for android, getting weird java errors when launching on android devices. works fine when running ionic serve tho.
Event App and Maps
Awesome event app with Google Maps integration
Free!
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:
- 9 years ago
- Updated:
- 8 years ago
- Category:
- Starters
- Tags:
- maps, event, events, google maps, google, sidemenu, pin, marker, round images, native map, dialer
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
- go to the \www\app\controllers\ folder and open up the results.js with your favorite editor
- Edit the following line to include your Google API key:
$scope.apiKey = 'YOUR_API_KEY_HERE';Trying out the app
- Issue ionic serve in your shell to try out the app in your regular local browser
- 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.
Rob Groenendaal
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
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" ;)
lewis valenzuela
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
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
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
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
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
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
Everton Costa
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
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
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
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
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
hi bengt i have requirement for a similar kind of app. Can you help me.? Mail me : abinaustin007@gmail.com
Oscar ytalPascual
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
bishoy melek
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
Peter T
Hello Bishoy, Would you please send your modification to be able to read Json data please (REST API). Thank you. - epicmargin[at]gmail.com
Antonio Carlos Franco
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
bishoy melek
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
Peter T
Hello Bishoy, Would you please send your modification to be able to read Json data please (REST API). Thank you. - epicmargin[at]gmail.com
Antonio Carlos Franco
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
Oscar ytalPascual
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
abin
hi bengt i have requirement for a similar kind of app. Can you help me.? Mail me : abinaustin007@gmail.com
Mika Koskiola
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
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
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
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
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.
lewis valenzuela
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
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
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
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
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
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
5 stars from me. Only comment: I needed to update the api-key in results.html instead of the googleMaps.js file.
Lars Kinnunen
Doesn't work for android, getting weird java errors when launching on android devices. works fine when running ionic serve tho.
afo
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
Good maps example
Nick Hui
excellent example!
Said Talbi
Nice design, thanks for sharing
afo
excellent app example, many thanks!!
Everton Costa
Nice example of application! A little bit messed code... Thanks anyway!
Mika Koskiola
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
Great app, but complex to use other plugins, maybe
Sangram
Great Work :)
Sangram
Great Work :)
Axel Minet
great example!
{{ rating.comment }}
{{ rating.comment }}
Axel Minet
great example!
Sangram
Great Work :)
Sangram
Great Work :)
Oscar ytalPascual
Great app, but complex to use other plugins, maybe
Mika Koskiola
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
Nice example of application! A little bit messed code... Thanks anyway!
afo
excellent app example, many thanks!!
Said Talbi
Nice design, thanks for sharing
Nick Hui
excellent example!
Rob Groenendaal
Good maps example