wf9a5m75 / ionic-googlemaps-demo Goto Github PK

TypeScript 46.27% HTML 51.22% CSS 2.34% JavaScript 0.17%

ionic-googlemaps-demo's Introduction

@ionic-native/Google Maps plugin demo (on progress)

This is a demo application of @ionic-native/Google Maps plugin.

Unfortunately, the current wrapper plugin has lots of mistake.

In order to find out, Masashi(@wf9a5m75) needs to test all methods. But unfortunately, he's unfamiliar with the ionic framework and the Cordova Google Maps Plugin has lots of methods to implement.

What do Masashi need help with?

I've has been trying to port the code from JavaScript version demo into the ionic wrapper version demo (ionic-googlemaps-demo).

Please help me to create each pages in ionic style.

How to contribute?

It is a really easy job. Just convert what is in JavaScript to TypeScript.

STEP-1: Fork this project on github

Click on this button, then fork this project.

STEP-2: Clone the forked your repo into your local machine

$> git clone https://github.com/(your account name)/ionic-googlemaps-demo

$> cd ionic-google-maps

STEP-3: Create a branch with your github account name

In order to conflict with other people, please create a branch. For example, Masashi's github account name is @wf9a5m75.

$> git checkout -b wf9a5m75  // create a new branch

$> git push --set-upstream origin wf9a5m75

STEP-4: Install

Don't forget to enable the Google Maps Android API v2/Google Maps SDK for iOS at the Google APIs console.

The package name is ionic.google.maps

$> npm install -g ionic@latest

$> ionic cordova platform add android (or ios)

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."
$> npm install @ionic-native/core (^4.2.1)  // must be 4.2.1 or over
$> npm install @ionic-native/googlemaps (^4.2.1)

STEP-5: Run

It should work.

$> ionic cordova run android -l

STEP-6: Generate new page

For example, create a page for Map.animateCameraZoomIn().

$> cd (path to)ionic-googlemaps-demo

$> ionic generate page AnimateCameraZoomIn  // Don't generate if the page is already exists.
[OK] Generated a page named AnimateCameraZoomIn!

$> cd src/pages/

$> mv animate-camera-zoom-in map/

This will create package in pages folder(there is issue in ionic to allow to specify any location for generated folder). All you have to do is move this folder into any folder. Restart your ionic cli and all changes will be presented.

STEP-7: your work

STEP-8: Commit the files to your repo first

$> git add pages/map/animate-camera-zoom-in/*

$> git commit -m "Add: map.animateCameraZoomIn()

$> git push

STEP-9: Please send a pull request

Then Masashi will review and merge it.

Before starting your work, please reserve the page.

When you want to create some pages, please let Masashi know which page do you want to create, at the slack channel (#general channel).

I will write your github account name on this README.md file.

Current working progress

[x] means the page was created.

ionic-googlemaps-demo's People

Contributors

Stargazers

Watchers

ionic-googlemaps-demo's Issues

Custom Controls

Is it possible using this plugin to add a custom control, like described in https://developers.google.com/maps/documentation/javascript/examples/control-custom

BaseClass question

The result returned from geocode with an array as input is of type

mvcArray: BaseArrayClass<GeocoderResult>

When calling

mvcArray.on('insert_at')

the ionicWrapper has this signature

    on(event: 'insert_at' | 'remove_at' | 'set_at' | 'finish'): Observable<any>;

so expecting an observable I subscribe, but that results in

Cannot read property 'subscribe' of undefined

Looking in BaseClass.js it looks like another signature is expected as the code is:

self.on = function(eventName, callback) {
  if (!eventName || !callback || typeof callback !== "function") {
    return;
  }

So it expects a callback function

MAP_DRAG_EVENTS

I have added the following to verify that MAP_DRAP events are working in Ionic

      self.map1.setAllGesturesEnabled(true);
      self.map1.on(GoogleMapsEvent.MAP_DRAG_START)
        .subscribe(() => {
          console.log("--> map_canvas1 : map drag");
          resolve();
        });

but I never receive the event

Are there any known issues here ?

wf9a5m75 I need your help please

I am new to this and cannot find how to report an issue for 'https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4' which I am referring to.

I am receiving a blank white area where the maps should be displayed. I can still see the red border around where the map should be. I have been trying for hours and now have completely copy and pasted your code for the demo and it still does not work.

Here is a link to my repo: http://github.com/JamesSlater/app

The maps page is displayed on a modal from tapping the pin icon on the Contact page, to give you a bit of background.

I hope you have time to get back to me. Thanks in advance.

BaseArrayClass

In the documentation there are 3 events

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/BaseArrayClass/README.md

In the Ionic Wrapper, there are 4 events:

on(event: 'insert_at' | 'remove_at' | 'set_at' | 'finish'): Observable<any>;

In the demo-code for native js, an event called 'error' is used

  mvcArray.on('error', function(error) {
    console.log(error);
  });
  mvcArray.on('insert_at', function(index) {

    // Get a result
    var geocodeResult = mvcArray.getAt(index);
    if (geocodeResult.length > 0) {

      latLngBounds.extend(geocodeResult[0].position);

      map.addMarker({
        'position': geocodeResult[0].position,
        'title':  JSON.stringify(geocodeResult)
      }, function(marker) {
        markers.push(marker);
      });
    } else {
      markers.push(null);
    }
  });

  mvcArray.on('finish', function() {
    isRunning = false;
  });

about the decoder did it changed? because it doesn't return an ILatLng[] but a LatLng instead.

 let encodedPath: string = 'c{|xHbo|OSnFrSjW~M{EnFwVz@wy@vQsq@cBoUzJ{EzObBrIcLfE~C~H{Y~C~CfOgY{EjM{EgTcLzTsSwQcGf@IoKgJSkMsb@RkR' +
    'vVkRDon@SooBvBsXbGgE{@{EfE{EwLsXgEo{AcVgw@kRc|A_q@seAcLg@bBvQkCnKcGjCwQsSkM?cL{YjHrS{J~HgOwBgOjf@{Jj' +
    'u@cLjRcGz^oUjW{Tni@f@jRsIj\wBjf@sNbo@wG~iArDnlArIj\bGfr@bQf^~WrSnPvVfOjHnURzc@cQbQzc@nUrtAbBfYkC~M~H' +
    'nZ~Mz^f^_N~MrDbBwQkWsXR{E';

    let points: ILatLng[] = Encoding.decodePath(encodedPath);

Error in

The code for

/*****************************************************************************
 * LatLngBounds Class
 *****************************************************************************/
var LatLngBounds = function() {
    Object.defineProperty(this, "type", {
        value: "LatLngBounds",
        writable: false
    });

    var args = [];
    if (arguments.length === 1 &&
        typeof arguments[0] === "object" &&
        "push" in arguments[0]) {
        args = arguments[0];
    } else {
        args = Array.prototype.slice.call(arguments, 0);
    }
    for (var i = 0; i < args.length; i++) {
        if ("lat" in args[i] && "lng" in args[i]) {
            this.extend(args[i]);
        }
    }
};

fails if called like this

let latLngBounds = new LatLngBounds();

but works ok if called this way

let latLngBounds = new LatLngBounds([]);

The error:
vendor.js:1443 ERROR Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for 'lat' in undefined
TypeError: Cannot use 'in' operator to search for 'lat' in undefined