Example 2: Listing Shop Integrating With Google Map

After the first example, you know how to $http.get() data from Restful server. This example will show you how to list your records in listing format and show with Google Map. Please follow below steps:

1. Under C:\workspace_ionic\itBlogsApp\www\index.html , add:

<!– Google map js –>

<script src=”http://maps.googleapis.com/maps/api/js”></script>

after <!– cordova script (this will be a 404 during development) –>

 

2. Update C:\workspace_ionic\itBlogsApp\www\css\style.css, add the this code

#map {

    width: 100%;

    height: 300px;

}

.scroll {

  height: 100%;

}

 

3. Update C:\workspace_ionic\itBlogsApp\www\js\app.js , add below code after .state(‘app.home’

  .state(‘app.shoplists’,   { url: ‘/shoplists’,                                               views: { ‘menuContent’: { templateUrl: ‘templates/shoplists.html’,          controller: ‘ShopListsController’ } } })

  .state(‘app.shop’,                          { url: ‘/shoplists/:shopId’,             views: { ‘menuContent’: { templateUrl: ‘templates/shop.html’,                                 controller: ‘ShopController’ } } })

 

4. Update C:\workspace_ionic\itBlogsApp\www\templates\menu.html, add the this code

<ion-item menu-close href=”#/app/shoplists”>Find Nearby Shops</ion-item>

after

<ion-item menu-close href=”#/app/home”>Home</ion-item>

 

 

5. Update C:\workspace_ionic\itBlogsApp\www\js\controllers.js , adding below code after .controller(‘HomeController’, function($scope, $http, $stateParams)

.controller(‘ShopListsController’, function($scope, $http, $stateParams) {

                $scope.getData = function() {

                                $http.get(“http://localhost:8080/SpringRestfulExample/shop”)

                                .success(function(data, status) {

                                                $scope.shoplists = data;

                                })

                                .error(function(data, status) {

                                                console.log(‘ShopListsController Error…’, status);

                                });

    };

                $scope.getData();

})

.controller(‘ShopController’, function($scope, $http, $stateParams) {

                $scope.getData = function() {

                                $http.get(“http://localhost:8080/SpringRestfulExample/shop/”+$stateParams.shopId)

                                .success(function(data, status) {

                                                $scope.shop = data;

                                                var myLatlng = new google.maps.LatLng($scope.shop.mapLatitude,$scope.shop.mapLongitude);

                                                var mapOptions = {

                                                                center: myLatlng,

                                                                zoom: 14,

                                                                mapTypeId: google.maps.MapTypeId.ROADMAP

                                                };

                                                var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

                                                var marker = new google.maps.Marker({

                                                                position: myLatlng,

                                                                map: map,

                                                                title: $scope.shop.name

                                                });

                                                google.maps.event.addListener(marker, ‘click’, function() {

                                                                infowindow.open(map,marker);

                                                });

                                                $scope.map = map;

                                })

                                .error(function(data, status) {

                                                console.log(‘ShopListController Error…’, status);

                                });

    };

                $scope.getData();

})

 

6. Finally, adding shoplists.html and shop.html to C:\workspace_ionic\itBlogsApp\www\templates\ . Please find below codes:

shoplists.html

<ion-view view-title=”Find Nearby Shops”>

  <ion-content>

    <ion-list>

      <ion-item ng-repeat=”shop in shoplists” href=”#/app/shoplists/{{shop.id}}”>

        {{shop.name}} ({{shop.address}})

      </ion-item>

    </ion-list>

  </ion-content>

</ion-view>

 

Shop.html

<ion-view view-title=”Find Nearby Shops : {{shop.name}}”>

  <ion-content>

                <div class=”card”>

                                <div class=”item item-divider”>

                                                <h2 class=”title”>{{shop.name}}</h2>

                                </div>

                                <div class=”item item-text-wrap”>

                                                <div class=”row”>

                                                                <div class=”col-25″>Telephone</div>

                                                                <div class=”col-100 col-offset-100″><p>{{shop.telephone}}</p></div>

                                                </div>

                                                <div class=”row”>

                                                                <div class=”col-25″>Fax</div>

                                                                <div class=”col-100 col-offset-100″><p>{{shop.fax}}</p></div>

                                                </div>

                                                <div class=”row”>

                                                                <div class=”col-25″>Email</div>

                                                                <div class=”col-100 col-offset-100″><p>{{shop.email}}</p></div>

                                                </div>

                                                <div class=”row”>

                                                                <div class=”col-25″>Address</div>

                                                                <div class=”col-100 col-offset-100″><p>{{shop.address}}</p></div>

                                                </div>

                                </div>

                                <div class=”item item-divider”>

                                                <div class=”col-25″>Google Map</div>

                                                <div class=”row”>

                                                                <div id=”map” data-tap-disabled=”true”></div>

                                                </div>

                                </div>

                </div>

  </ion-content>

</ion-view>

 

Done, let’s try to refresh the browser, you should find that the menu has been updated as:

 

Click on “Find Nearby Shops”, it will show you the list of shops:

 

Click on any one of the shop, you can find the shop details and related Google Map: