Wazzup Guys :D, Back with another one. 😉 Recently I was working on a Hybrid app that uses ionic Framework. And I wanted to have a Google map with a location pin in it. Since ionic apps are using Angular.js I search for an easy way to add Google maps to the app using Angular.js Here is what I found. 🙂

I found AngularJs Directive for the Google Maps on GitHub. Here is how to use it. I’ll create a sample app that includes a Google map and put a location pin on it. First create Angular.js app like the way you do it. Look at my file structure bellow.

Project File Structure
Project File Structure

Here I have index.html file for my HTML, styles.css for my custom styles, In the js folder I have angular.js library and in the app folder is where I have my controllers. Simple 🙂

I have given the name of the app as mapSample in the ng-app directive. I have a controller called MainController that is attached to the body of the app. Has a simple div that encapsulates the map I’m going to put in later. Here is the HTML Code.

<!DOCTYPE html>
 <html ng-app="mapSample">
 <head lang="en">
     <meta charset="UTF-8">
     	<link rel="stylesheet" href="css/styles.css" />
     <script src="js/angular.min.js"></script>
     <script src="app/controllers.js"></script>
     <title>AngularJS/Google Maps Sample</title>
 </head>
 <body ng-controller="MainController">
<h1 class="title">AngulerJS/Google Maps Sample</h1>
<div class="mapCanvas"></div>
</body>
 </html>

Go start out, you need to download 2 Javascript library files to make it work. First one is the angular-google-maps.js library file and the other one is lodash.js  which is a dependency of angular-google-maps library. Download them and include them in your js folder. And attach them to your HTML file. The head of the HTML file should look like this.

<head lang="en">
     <meta charset="UTF-8">
     	<link rel="stylesheet" href="css/styles.css" />
     <script src="js/angular.min.js"></script>
     <script src="app/controllers.js"></script>
     <script src="js/lodash.min.js"></script>
     <script src="js/angular-google-maps.min.js"></script>
     <title>AngularJS/Google Maps Sample</title>
 </head>

Then you are ready to go. 😀 We need to add 2 elements to the HTML file to get the Map. First one is for the Map itself and the other one is for the marker. Here is how you do it. For the Google Map add the following code to the HTML inside the div.

<ui-gmap-google-map
         center="map.center"
         zoom="map.zoom"
         draggable="true"
         options="options">
 </ui-gmap-google-map>

And for the map marker pin add the following HTML element inside the ui-gmap-google-map element.

<ui-gmap-marker
         coords="marker.coords"
         options="marker.options"
         idkey="marker.id">
 </ui-gmap-marker>

So finally your whole code should look like this. 🙂

<ui-gmap-google-map
         center='map.center'
         zoom='map.zoom'
         draggable="true"
         options="options">
     <ui-gmap-marker
             coords="marker.coords"
             options="marker.options"
             idkey="marker.id">
     </ui-gmap-marker>
 </ui-gmap-google-map>

Next you need to add the javascript code to get the map working. In the controllers.js file in the app folder you can find the MainController controller. First you need to add the angular-google-maps as a dependency of the angular module. To do that add uiGmapgoogle-maps  to the module. Look bellow.

angular.module('mapSample', ['uiGmapgoogle-maps'])

Then you need to add the following code to the controller.

 // for the map
 $scope.map = {
     center: {
         latitude: 7.0933,
         longitude: 79.9989
     },
     draggable: true,
     zoom: 15
 };
 // map options
 $scope.options = {
     scrollwheel: false
 };

Here $scope.map variable has the parameters for the map. It includes map center that includes latitude and longitude of the center of the map, darggable is set to true so the map is draggable by the user. Zoom level is set to 15 which controls the zoom of the map (the zoom level must be a value between 1 and 20).

$scope.options includes the map options that can be passed additionally to format the map. Here by setting scrollwheel to false  I have disabled the ability to zoom the map using the mouse scroll wheel. Explore other Map Options

Then to add the map marker pin in to the map add the following code to the controller.

 // map marker
 $scope.marker = {
     id: 0,
     coords: {
         latitude:  7.0933,
         longitude: 79.9989
     },
     options: {
         draggable: false,
         title: 'The KVK Blog',
         animation: 1 // 1: BOUNCE, 2: DROP
     }
 };

This will add a pin to the map indicating the location pointed with the markers location in latitude and longitude. Marker option draggable is set to false so the marker is not draggable. Explorer other Marker Options.

Then you need to add the following style to your style sheet to make the map visible on the page. It targets a div elements that will be included when the app runs and you have to specify at least the height to make the map visible. ( Almost forgot to tell you this 😀 )

Run the application and take a look 😀 Here is a screen shot of how it looks like 🙂

Finished Angular App
Finished Angular App

The marker, Look at it. its BOUNCING, BOUNCING, BOUNCING 😀 all right, all right stop jumping up and down 😛

That’s about it guys for this post, See how easy it is to add Google Maps in to Angular.js apps. Try it out. I’ll add the sample code and some references bellow this post. 🙂 Till next time. Later homies 😀

And almost forgot (again) Merry Christmas Amigos 😀

Relater References 😉

Advertisements

3 thoughts on “Quickly Add Google Maps into Your Angular.js App

  1. how can i add the exact location of the user into the map. so that when it loads it shows up the exact location of the user with a marker on it?

  2. I tried as suggested.. But i am getting an error
    Uncaught Error: [$injector:modulerr] Failed to instantiate module Cartelina due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.parent due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.child due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.utils due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.extensions due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.providers due to:
    Error: [$injector:modulerr] Failed to instantiate module nemLogging due to:
    Error: [$injector:nomod] Module ‘nemLogging’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.2.22/$injector/nomod?p0=nemLogging
    at VALIDITY_STATE_PROPERTY (http:/test/lib/angular-v1.2.22.js:78:12)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s