Lars Kinnunen
Doesn't work for android, getting weird java errors when launching on android devices. works fine when running ionic serve tho.
Awesome event app with Google Maps integration
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).
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!
$scope.apiKey = 'YOUR_API_KEY_HERE';
Finding something in the demo content: Type in 'Berlin', 'Ber', 'Sports' or 'Düsseldorf'
Hey there! You'll need to log in before you can leave a comment here.
Doesn't work for android, getting weird java errors when launching on android devices. works fine when running ionic serve tho.
nevermind had to run ionic state restore and it worked.
Thanks, for the last reply and I hope everything is working now.
Thx for share free! You rules!
thx... i will rule the world *mohahahahahahahaa
5 stars from me. Only comment: I needed to update the api-key in results.html instead of the googleMaps.js file.
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" ;)
thanks for sharing, great work!
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
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>
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!
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
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.
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
@lewis valenzuela sorry for the late answer. The geo-tag is only working on phones
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.
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
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?
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.
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 :)
hi bengt i have requirement for a similar kind of app. Can you help me.? Mail me : abinaustin007@gmail.com
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
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
Please you can send to me? dkouti@gmail.com
Hi bishop melek. I would very much like to get your version with Json. niels@ffe-ye.dk
Hello Bishoy, Would you please send your modification to be able to read Json data please (REST API). Thank you. - epicmargin[at]gmail.com
Hi Bishot please can you send the modification. ankeliadam@gmail.com
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
Oi Bishot, por favor, você pode enviar a modificação. 2011admuniverso@gmail.com
Can you please help me by sending the correction?
Can you please help me by sending the correction?
Oi Bishot, por favor, você pode enviar a modificação. 2011admuniverso@gmail.com
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
Please you can send to me? dkouti@gmail.com
Hi bishop melek. I would very much like to get your version with Json. niels@ffe-ye.dk
Hello Bishoy, Would you please send your modification to be able to read Json data please (REST API). Thank you. - epicmargin[at]gmail.com
Hi Bishot please can you send the modification. ankeliadam@gmail.com
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
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
hi bengt i have requirement for a similar kind of app. Can you help me.? Mail me : abinaustin007@gmail.com
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 :)
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.
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?
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
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 sorry for the late answer. The geo-tag is only working on phones
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
nevermind had to run ionic state restore and it worked.
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
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!
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>
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
thanks for sharing, great work!
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" ;)
5 stars from me. Only comment: I needed to update the api-key in results.html instead of the googleMaps.js file.
thx... i will rule the world *mohahahahahahahaa
Thx for share free! You rules!
Thanks, for the last reply and I hope everything is working now.
Doesn't work for android, getting weird java errors when launching on android devices. works fine when running ionic serve tho.
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.
Good maps example
excellent example!
Nice design, thanks for sharing
excellent app example, many thanks!!
Nice example of application! A little bit messed code... Thanks anyway!
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!
Great app, but complex to use other plugins, maybe
Great Work :)
Great Work :)
great example!
{{ rating.comment }}
{{ rating.comment }}
great example!
Great Work :)
Great Work :)
Great app, but complex to use other plugins, maybe
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!
Nice example of application! A little bit messed code... Thanks anyway!
excellent app example, many thanks!!
Nice design, thanks for sharing
excellent example!
Good maps example