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

Hello, this is Goto from the web team

This is an example of using Google Maps API in ionic2.
There is a lot of information in English, but I think there are some people who find reading English to be bad for their mental health, so
I think this will be useful for them.

This article may be helpful for getting started with ionic2

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

Installing the Plugin

We will use a plugin called
the Google Maps plugin for Cordova By using the plugin, you don't need to write separate code for Android and iOS.
Also, since it uses the native Google Maps SDK instead of the Google Maps JavaScript API,
it helps reduce data charges and displays maps quickly.

$ ionic plugin add cordova-plugin-googlemaps

---

*From now on, I will omit the code that I have already written

View the map

Here's how to use it:
Place a div element where you want to display the map, and
then use new GoogleMap('ID of the placed div');.
*The sample code on the official website has an "s" in GoogleMaps. There's 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'); } }

Determine the display position

Once you have the map displayed, you will want to decide where to display it.
The default display position is set to 0 degrees latitude and longitude, with a magnification that allows you to display the world map.
Let's decide the center position of the map and the magnification.

//Import GoogleMapsLatLng. import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from 'ionic-native'; export class MapPage { constructor() { this.map = new GoogleMap('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'); //Set the center coordinate with GoogleMap.setCenter. this.map.setCenter(myPosition); //Set the magnification with GoogleMap.setZoom. The larger the number, the narrower the area displayed. this.map.setZoom(15); }); }); } }

* The 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 functions
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

Place a marker

Place a marker

//New import GoogleMapsMarkerOptions, GoogleMapsMarker. import {GoogleMapsMarker, GoogleMapsMarkerOptions} from 'ionic-native'; export class MapComponent { private marker: GoogleMapsMarker; //Declare a variable to hold the value 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); //Place the marker. this.map.addMarker({ position: myPosition //Specify latitude and longitude using GoogleMapsLatLng type. }).then((marker)=>{ this.marker = marker; //Store in this.marker }); }); }); } }

Allows you to move markers by dragging them

The reason we stored the marker in this.marker when placing it is so that we can manipulate it later like this

//Set the option to be draggable this.marker.setDraggable(true);

Connect markers with lines

//New import of GoogleMapsPolyline. import {GoogleMapsPolyline} from 'ionic-native'; export class MapComponent { private positions: Array<GoogleMapsLatLng> ; //Declare the type of variable that will hold multiple positions private markers: Array<GoogleMapsMarker> ; //Declare the type of variable that holds multiple markers private poly_lines: Array<GoogleMapsPolyline> ; //Declare a variable type to hold multiple lines //Initialize 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 an array to hold markers this.poly_lines = Array(); //Initialize an array to hold lines this.map.one(GoogleMapsEvent.MAP_READY).then(() => { //Place a marker on a position this.positions.forEach((position) => { this.map.addMarker({ position: position }).then((marker) => { this.markers.push(marker); //Keep the placed marker }); }); //Place lines between positions 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); //Keep the placed line }); }); } }

Place a circle

//Newly import GoogleMapsCircle. import {GoogleMapsCircle} from 'ionic-native'; export class MapComponent { private circle: GoogleMapsCircle; //Declare the type of the variable that will hold the circle this.map.one(GoogleMapsEvent.MAP_READY).then(() => { //Place the circle let circle_position = new GoogleMapsLatLng('34.6687443', '135.4876302'); this.map.addCircle({ center: circle_position, //Set the center coordinate of the circle radius: 100, //Set the radius of the circle (in meters) strokeColor: '#f53d3d', //Set the color of the line around the circle strokeWidth: 1, //Set the thickness of the line around the circle fillColor: '#E6F7FF' //Set the color of the inside of the circle }).then((circle) => { this.circle = circle; //Keep the placed circle }); } }

others

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

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

There are a variety of 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;

The option definitions are below these, so if you take a look at them you'll probably get the hang of using them!!

That's it!!