Google Maps & Ionic

ng-hangout #11

/ What can you do?

  • Search

  • Directions + Navigation

  • Show map or layer

  • Strew view

/ With Ionic

  • Native SDK

  • Web SDK

/ Which is the best choice?

  • Perfomance

  • Incomplete SDK

Native

cordova-plugin-googlemaps

  • Run everywhere

  • Full SDK

  • - Performance

Web

JavaScript API

/ How different between Google Maps JavaScript API v3?

Link

Google Maps JavaScript API v3 Cordova-Plugin-GoogleMaps
Rendering system JavaScript + HTML JavaScript + Native APIs
Offline map Not possible Possible (only you displayed area)
3D View Not possible Possible
Platform All browsers Android and iOS app only
Tile image Bitmap Vector

/ Demos with code

  • Google Maps JS + Ionic en 5 pasos

  • Google Maps Nativo con Ionic

  • Trazando rutas con Google Maps JS + Ionic

  • Background Geolocation

  • Google Maps + Geocoder

  • Múltiples markers en Google Maps

/ Native + Ionic

const mapOptions: GoogleMapOptions = {
  camera: {
    target: {
      lat: 43.0741904,
      lng: -89.3809802
    },
    zoom: 18,
    tilt: 30
  }
};

this.map = this.googleMaps.create(
    'map_canvas',
    mapOptions
);

/ Web + Ionic

// create a new map by passing HTMLElement
let mapEle: HTMLElement = document.getElementById('map');

// create LatLng object
let myLatLng = {lat: latitude, lng: longitude};

// create map
this.map = new google.maps.Map(mapEle, {
  center: myLatLng,
  zoom: 12
});

https://github.com/yannbf/may-the-4th

/ Questions?

Made with Slides.com