he following will get you a fresh Ionic project with geolocation and a fancy Google Map.
Like with most of my Ionic tutorials, let’s start by creating a new project with the iOS and Android platforms added:
Create new Ionic Android and iOS project
Remember, if you’re not on a Mac, you cannot build for iOS.
Since we are using maps, it is probably a good idea to add geolocation functionality to your application. You can add the Apache Cordova Geolocation API by running the following command:
We are going to be using the Google Maps JavaScript SDK, which requires us to have an API key for use in our application. Go into your Google API Console and register a new Google Maps application.
When you have your key, crack open your www/index.html file because we need to add the JavaScript library to our project.
Please note that the Google Maps JavaScript library cannot be
downloaded, so there will always be a small delay during the initial
setup when you launch your application.
Now that the SDK is included we need to add some custom CSS for displaying it on the screen. Open your www/css/style.css file and add the following code:
Next we get to start doing the fun stuff. Open your www/app.js file because we want to add a controller that handles the Google Map.
The above code will register the map to a DOM element with a map
id. It will center the map in Merced, California and then attempt to
center the map around your current location. If it finds your current
location it will place a marker.
We are not quite done yet. We need to add some code to our www/index.html file for containing the map.
Now, the depth of Google Maps can go far beyond the simplistic nature I demonstrated in my article. Have some fun with the official API docs and use Google Maps to its full power.
Like with most of my Ionic tutorials, let’s start by creating a new project with the iOS and Android platforms added:
Create new Ionic Android and iOS project
Since we are using maps, it is probably a good idea to add geolocation functionality to your application. You can add the Apache Cordova Geolocation API by running the following command:
When you have your key, crack open your www/index.html file because we need to add the JavaScript library to our project.
Now that the SDK is included we need to add some custom CSS for displaying it on the screen. Open your www/css/style.css file and add the following code:
We are not quite done yet. We need to add some code to our www/index.html file for containing the map.
No comments:
Post a Comment