Implementing Google Maps API

In this lab, we will be implementing Google Maps into our business details view.

Initial setup
Head to http://angular-ui.github.io/angular-google-maps/#!/ and click on the download button. A new tab for

angular-google-maps.min.js should be opened for you. Save that file as angular-google-maps.min.js in

your js folder.
Now, in index.html , we need to import that javascript folder. Add it before your oauth-signature.min.js .

...
<script src="js/angular-google-maps.min.js"></script>
<script src="js/oauth-signature.min.js"></script>
<script src="js/app.js"></script>
...

You will also need to download lodash.min and angular-simple-logger.min .

https://raw.githubusercontent.com
com/nmccready/angular-simple-logger/master/dist/angular-si
mple-logger.min.js
https://raw.githubusercontent.com
com/lodash/lodash/4.0.0/dist/lodash.min.js

Remember to put them into the js folder and import them. It will look something like this after that.

...
<!-- your app's js -->
<script src="js/lodash.min.js"></script>
<script src="js/angular-simple-logger.min.js"></script>
<script src="js/angular-google-maps.min.js"></script>
<script src="js/oauth-signature.min.js"></script>
<script src="js/app.js"></script>
...

TIP: lodash.min , followed by angular-simple-logger.min , and finally angular-google-maps.min

When you are done, import Google Maps API v3 before lodash.min.js :

<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>

We will now need to include the Google Maps API as an angular dependency. Head to app.js and add

uiGmapgoogle-maps in.

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

...

Adding the map

In style.css , add the following:

.angular-google-map-container { height: 350px; }

In your controllers.js , replace your FeedDetailsCtrl with this:

function FeedDetailsCtrl($stateParams, YelpAPI) {

var vm = this
this; // view model (vm)
YelpAPI.searchBusiness($stateParams.businessId, function
function(data) {
vm.business = data;
vm.map = {
center: {
latitude: data.location.coordinate.latitude,
longitude: data.location.coordinate.longitude
},
zoom: 14,
options: { scrollwheel : false }
};
vm.marker = {
center: {
latitude: data.location.coordinate.latitude,
longitude: data.location.coordinate.longitude
},
options: { draggable : false }
};
});
}

And finally, modify the card tag in feed-details.html so that it looks like this:

<ion-view view-title="Details" ng-controller="FeedDetailsCtrl as vm">

<ion-content>
<div class="card">
<div class="item item-text-wrap item-icon-left">
<i class="icon ion-home"></i>
<h2 ng-repeat="line in vm.business.location.display_address">
{{ line }}
</h2>
</div>
</div>
<div class="card">
<ui-gmap-google-map center="vm.map.center" zoom="vm.map.zoom" draggable="true" opt
ions="vm.map.options">
<ui-gmap-marker idKey="vm.business.id" coords="vm.marker.center" options="vm.mar
ker.options"></ui-gmap-marker>
</ui-gmap-google-map>
</div>
</ion-content>
</ion-view>

Your map should now display correctly.

Reading

Google Maps for AngularJS Quickstart: http://angular-ui.github.io/angular-google-maps/#!/use