![]() ![]() The GoogleMaps provider will handle setting up Google Maps in the application, and the Connectivity provider will be used in conjunction with the GoogleMaps provider to help load in the Google Maps Javascript SDK. The Map page will be used to show the Google Map with markers indicating the location of places of interest, and the List page will display the same information in list format (except that it will also list the distance to each place, and the list will be sorted in order from closest to furthest). We will get to the implementation of all of these eventually, but let me quickly go over what we will be using them for. To do that, you will need to run the following generate commands: ionic g page Map ionic g page List ionic g provider Connectivity ionic g provider GoogleMaps ionic g provider Locations We are going to require a few additional pages and providers in our application, so we are going to use the Ionic CLI to generate them now. Once that has finished generating you should change into the project by running the following command: cd ionic2-nearby ![]() We will start off by generating a new Ionic project with the following command: ionic start ionic2 - nearby blank - v2 If you want a much more detailed guide for learning Ionic 2, then take a look at Building Mobile Apps with Ionic 2. If you're not familiar with Ionic 2 already, I'd recommend reading my Ionic 2 Beginners Guide first to get up and running and understand the basic concepts. You must also already have Ionic 2 set up on your machine. Before We Get Startedīefore you go through this tutorial, you should have at least a basic understanding of Ionic 2 concepts. In the second part, we will work on loading some locations into the app and calculating which locations are closest to the user (as well as adding those locations to the map). In the first part, we will focus on getting the template set up along with our map. The tutorial will be split up into two parts. Ordering data and displaying it in a list (ordered from lowest to highest).Calculating the distance between two points, and mapping that information into an array.Displaying multiple markers in Google Maps.Some key concepts we will be covering are: Here's what it will look like when it is done: ![]() In this tutorial, we will be walking through how to build a list that will sort places of interest based on the proximity to the user's current location, and we will also include a standard map to accompany it. If you're busting for the toilet, then maybe you just want to know wherever the closest one is right now. Maps are great at visually representing information and can give you a geographical sense of where you need to go.Ī plain old list can come in just as handy, though. One particular use might be to display a bunch of places of interests to a user – all the nearby restaurants that you operate, or maybe nearby tourist information booths, or even public toilets. Maps in mobile applications are endlessly useful. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |