Search This Blog

Sunday 20 March 2016

using Google Maps in Ionic/Web project

its a simple two step process

1. to use google maps in your project, you should get a api key from google console
2. install cordova GeoLocationAPI
2. add a div and from javascript bind map to it.

1.Creating API key:
1. go to https://console.cloud.google.com/
2. from the top nav bar  project->create project
3. go to use google api
4. select google maps api for javascript
5. enable it and to get the api key you need credentials to be created
6. click on credentials in the left pane
7. click on create credentials (blue button)
8. click on API Key
9. select android as i was trying for an android app
10. give a name to the key and click create.
11. copy the API key it is required for the next step

2. install GeoLocation plugin
          ionic plugin add cordova-plugin-geolocation
reference: https://www.npmjs.com/package/cordova-plugin-geolocation

3. Adding to your project:
 in your ion-view (can be any html need not be ionic) add a div with an id which wanted to use to load map.
<ion-view view-title="Find Near by Bins" ng-controller="FindNearByViewCtrl">
<ion-nav-buttons side="right">
      <i class="ion-log-out" style="font-size:2.2em" ng-click="doLogout()"></i>
 </ion-nav-buttons>
 <ion-nav-buttons side="left">
      <i class="ion-loop" style="font-size:2.2em" ng-click="doRefresh()"></i>
 </ion-nav-buttons>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>

in your controllers, add the below piece to bind map to #map.
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
 
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var latLng1 = new google.maps.LatLng(19.1759668, 72.79504659999998);
console.log(""+position.coords.latitude+"---"+ position.coords.longitude);
var mapOptions = {
 center: latLng1,
 zoom: 15,
 mapTypeId: google.maps.MapTypeId.ROADMAP
};
               $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
});

thats it displays google map in your project

1 comment:

  1. Harrah's Las Vegas - MapyRO
    Harrah's Las Vegas · Hotel. 1 Harrah's Blvd. Las 경주 출장샵 Vegas, NV 89109. 평택 출장샵 The Strip. 계룡 출장마사지 Directions · From 과천 출장마사지 Map. Las Vegas. Distance to Boardwalk. 0.5 mi. from Casino 울산광역 출장샵 at

    ReplyDelete