[TypeScript] Example of using GoogleMapsAPI with ionic2 [Android/iOS]

Hello, this is Goto from the web team.

This is an example of using GoogleMapsAPI in ionic2.
There is a lot of information in English, but I think there are some people who don't like reading English for their mental health, so
I think this book will be useful for those people.

I think this article will be helpful for how to get started with ionic2.

Learn how to use Ionic with The Ionic Book by @tyoshikawa1106 on @Qiita
http://qiita.com/tyoshikawa1106/items/cec9e893cb7449ba9ce7
I started Angular 2 + Ionic 2 by @creativewebjp on @Qiita
http://qiita.com/ creativewebjp/items/6986f97f8843e0157691

Installing plugins

We use a plugin called
Google Maps plugin for Cordova By using plugins, there is no need to write separate code for Android and iOS.
Additionally, since it uses the native Google Maps SDK rather than the Google Maps JavaScript API,
data charges can be reduced and the display will be faster.

$ ionic plugin add cordova-plugin-googlemaps

---

*From now on, I will omit the code that has been written once.

Show map

How to use it is as follows.
place a div element where you want to display the map and
do new GoogleMap('ID of the div you placed');
*The sample code on the official website is a trap with GoogleMaps and "s" attached. There is no such class!

import {Component} from '@angular/core'; import {GoogleMap, GoogleMapsEvent} from 'ionic-native'; @Component({ selector: 'map-canvas', template: '<div id="map_canvas" style="height: 100%; width: 100%;"></div> ' }) export class MapComponent { private map: GoogleMap; constructor() { console.log("map component constructor"); this.map = new GoogleMap('map_canvas'); } }

Decide display position

Once the map is displayed, I would like to decide where to display it.
The initial display position is set to a magnification that allows the world map to be displayed at 0 degrees latitude and longitude.
Determine the center position and magnification of the map.

//Import a new GoogleMapsLatLng. import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from 'ionic-native'; export class MapPage { constructor() { this.map = new GoogelMap('map_canvas'); GoogleMap.isAvailable().then(() => { this. map.one(GoogleMapsEvent.MAP_READY).then(() => { //Create a coordinate object with GoogleMapsLatLng. let myPosition = new GoogleMapsLatLng('34.6687443', '135.4876302'); //Center coordinate with GoogleMap.setCenter Set this.map.setCenter(myPosition); //Set the magnification using GoogleMap.setZoom. The larger the value, the narrower the area will be displayed. }); }); } }

*Then method that receives a Promise

.then((/* Promise */) => { /** ...process... **/ });

Promise.prototype.then()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
arrow function
https://developer.mozilla.org/ja/docs/Web/ JavaScript/Reference/arrow_functions

Place a marker

Set up a marker.

//GoogleMapsMarkerOptions, import a new GoogleMapsMarker. import {GoogleMapsMarker, GoogleMapsMarkerOptions} from 'ionic-native'; export class MapComponent { private marker: GoogleMapsMarker; //Declaring a variable to hold constructor() { GoogleMap.isAvailable().then(() => { this. map.one(GoogleMapsEvent.MAP_READY).then(() => { let myPosition = new GoogleMapsLatLng('34.6687443', '135.4876302'); this.map.setCenter(myPosition); this.map.setZoom(15); / /Set a marker. this.map.addMarker({ position: myPosition //Specify the latitude and longitude using GoogleMapsLatLng type. }).then((marker)=>{ this.marker = marker; //this. Keep in marker }); }); }); } }

Allow markers to be moved by dragging

The reason why I saved it in this.marker when setting the marker is to operate it later like this.

//Set draggable options this.marker.setDraggable(true);

Connect markers with lines

//Import a new GoogleMapsPolyline. import {GoogleMapsPolyline} from 'ionic-native'; export class MapComponent { private positions: Array<GoogleMapsLatLng> ; //Declaring the type of variable that holds multiple positions private markers: Array<GoogleMapsMarker> ; //Declaring the type of variable that will hold multiple markers private poly_lines: Array<GoogleMapsPolyline> ; //Declaring the type of variable that holds multiple lines //Initializing multiple positions this.positions = [ new GoogleMapsLatLng('34.669', '135.485'), new GoogleMapsLatLng('34.68', '135.488') , new GoogleMapsLatLng('34.69', '135.485'), new GoogleMapsLatLng('34.66', '135.481'), ]; this.markers = Array(); //Initialize the array that holds the markers this.poly_lines = Array (); //Initialize the array that holds the lines this.map.one(GoogleMapsEvent.MAP_READY).then() => { //Set a marker at the position this.positions.forEach((position) => { this.map.addMarker({ position: position }).then((marker) => { this.markers.push(marker); //Keep the placed marker }); }); //Create a line between positions Setting this.positions.forEach((position, index, positions) => { this.map.addPolyline({ if (index != 0) { points: [positions[index], positions[index-1]], // Start and end points of the line color: '#00A8E8', //Line color width: 1 //Line thickness } }).then((poly_line) => { this.poly_lines.push(poly_line); //Setting }); }); } }

set up a circle

//Import a new GoogleMapsCircle. import {GoogleMapsCircle} from 'ionic-native'; export class MapComponent { private circle: GoogleMapsCircle; //Declaring the type of the variable that will hold the circle this.map.one(GoogleMapsEvent.MAP_READY).then(() => { / /Set up a circle let circle_position = new GoogleMapsLatLng('34.6687443', '135.4876302'); this.map.addCircle({ center: circle_position, //Set the center coordinates of the circle radius: 100, //Set the radius of the circle ( m units) strokeColor: '#f53d3d', //Set the color of the line around the outside of the circle strokeWidth: 1, //Set the thickness of the line around the outside of the circle fillColor: '#E6F7FF' //The color of the inside of the circle Set }).then((circle) => { this.circle = circle; //Keep the set circle }); } }

others

I may write about it again, but if you want to do something other than these,

please read {project}/node_modules/ionic-native/dist/plugins/googlemaps.d.ts

There are various methods like this.

/** * Get the visible region */ getVisibleRegion(): Promise<VisibleRegion> ; showDialog(): void; closeDialog(): void; getLicenseInfo(): Promise<string> ; setCenter(latLng: GoogleMapsLatLng): void; setZoom(zoomLevel: number): void; setMapTypeId(typeId: string): void; setTilt(tiltLevel: number): void; animateCamera(cameraPosition: CameraPosition): void; moveCamera(cameraPosition: CameraPosition): void; setMyLocationEnabled(enabled: boolean): void; setIndoorEnabled(enabled: boolean): void; setTrafficEnabled(enabled: boolean): void; setCompassEnabled(enabled: boolean): void; setAllGesturesEnabled(enabled: boolean): void; addMarker(options: GoogleMapsMarkerOptions): Promise<GoogleMapsMarker> ; addCircle(options: GoogleMapsCircleOptions): Promise<GoogleMapsCircle> ; addPolygon(options: GoogleMapsPolygonOptions): Promise<GoogleMapsPolygon> ; addPolyline(options: GoogleMapsPolylineOptions): Promise<GoogleMapsPolyline> ; addTileOverlay(options: GoogleMapsTileOverlayOptions): Promise<GoogleMapsTileOverlay> ; addGroundOverlay(options: GoogleMapsGroundOverlayOptions): Promise<GoogleMapsGroundOverlay> ; addKmlOverlay(options: GoogleMapsKmlOverlayOptions): Promise<GoogleMapsKmlOverlay> ; setDiv(domNode: HTMLElement): void; setVisible(visible: boolean): void; setOptions(options: any): void; setBackgroundColor(backgroundColor: string): void; setPadding(top?: number, right?: number, bottom ?: number, left?: number): void; clear(): void; refreshLayout(): void; fromLatLngToPoint(latLng: GoogleMapsLatLng, point: any): Promise<any> ; fromPointToLatLng(point: any, latLng: GoogleMapsLatLng): Promise<GoogleMapsLatLng> ; toDataURL(): Promise<any> ; remove(): void; panBy(): void;

There are option definitions at the bottom of these, so if you look at them, you'll be able to use them! !

That’s it! !