Quickly Add Google Maps into Your Angular.js App
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.
[caption id=”attachment_222" align=”alignnone” width=”250"]
Project File Structure[/caption]
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.
[code language=”html”]
<!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>
[/code]
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.
[code language=”html”]
<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>
[/code]
Then you are ready to go. :D 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.
[code language=”html”]
<ui-gmap-google-map
center=”map.center”
zoom=”map.zoom”
draggable=”true”
options=”options”>
</ui-gmap-google-map>
[/code]
And for the map marker pin add the following HTML element inside the ui-gmap-google-map element.
[code language=”html”]
<ui-gmap-marker
coords=”marker.coords”
options=”marker.options”
idkey=”marker.id”>
</ui-gmap-marker>
[/code]
So finally your whole code should look like this. :)
[code language=”html”]
<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>
[/code]
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.
[code language=”javascript”]
angular.module(‘mapSample’, [‘uiGmapgoogle-maps’])
[/code]
Then you need to add the following code to the controller.
[code language=”javascript”]
// for the map
$scope.map = {
center: {
latitude: 7.0933,
longitude: 79.9989
},
draggable: true,
zoom: 15
};
// map options
$scope.options = {
scrollwheel: false
};
[/code]
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.
[code language=”javascript”]
// 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
}
};
[/code]
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 :D )
Run the application and take a look :D Here is a screen shot of how it looks like :)
[caption id=”attachment_223" align=”alignnone” width=”660"]
Finished Angular App[/caption]
The marker, Look at it. its BOUNCING, BOUNCING, BOUNCING :D all right, all right stop jumping up and down :P
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 :D
And almost forgot (again) Merry Christmas Amigos :D
