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.

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.

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.

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

[x] means the page was created.

• Map

  • getMap (@wf9a5m75)
  • setDiv (@wf9a5m75)
  • setMapTypeId (@wf9a5m75)
  • animateCamera (@wf9a5m75)
  • animateCameraZoomIn (@wf9a5m75)
  • animateCameraZoomOut (@wf9a5m75)
  • moveCamera (@wf9a5m75)
  • moveCameraZoomIn (@wf9a5m75)
  • moveCameraZoomOut (@wf9a5m75)
  • getCameraPosition (@wf9a5m75)
  • getCameraTarget (@wf9a5m75)
  • getCameraZoom (@wf9a5m75)
  • getCameraBearing (@wf9a5m75)
  • getCameraTilt (@wf9a5m75)
  • setCameraTarget (@wf9a5m75)
  • setCameraZoom (@wf9a5m75)
  • setCameraTilt (@wf9a5m75)
  • setCameraBearing (@wf9a5m75)
  • panBy (@quanganh206)
  • getVisibleRegion (@wf9a5m75)
  • getMyLocation (@quanganh206)
  • setClickable (@quanganh206)
  • remove (@wf9a5m75)
  • clear (@wf9a5m75)
  • fromLatLngToPoint (@wf9a5m75)
  • fromPointToLatLng (@wf9a5m75)
  • setMyLocationEnabled (@wf9a5m75)
  • getFocusedBuilding (@wf9a5m75)
  • setIndoorEnabled (@wf9a5m75)
  • setTrafficEnabled
  • setCompassEnabled
  • setAllGesturesEnabled
  • setVisible
  • setPadding (@wf9a5m75)
  • setOptions
  • toDataURL (@wf9a5m75)
  • MAP_CLICK
  • MAP_LONG_CLICK
  • MY_LOCATION_BUTTON_CLICK
  • CAMERA_EVENTS
  • MAP_DRAG_EVENTS
  • MAP_READY

• Marker

  • map.addMarker (@wf9a5m75)
  • getPosition (@pavel-kurnosov)
  • showInfoWindow (@pavel-kurnosov)
  • hideInfoWindow (@pavel-kurnosov)
  • setAnimation (@pavel-kurnosov)
  • isVisible (@pavel-kurnosov)
  • setTitle (@pavel-kurnosov)
  • setSnippet (@pavel-kurnosov)
  • remove (@pavel-kurnosov)
  • setIconAnchor (@pavel-kurnosov)
  • setInfoWindowAnchor (@pavel-kurnosov)
  • isInfoWindowShown (@pavel-kurnosov)
  • setOpacity (@pavel-kurnosov)
  • setZIndex (@pavel-kurnosov)
  • setVisible (@pavel-kurnosov)
  • setDraggable (@pavel-kurnosov)
  • setDisableAutoPan (@pavel-kurnosov)
  • setPosition (@pavel-kurnosov)
  • setRotation (@wf9a5m75)
  • setFlat (@wf9a5m75)
  • setIcon (@wf9a5m75)

• Circle

  • map.addCircle
  • setCenter
  • setRadius
  • setFillColor
  • setStrokeWidth
  • setStrokeColor
  • setClickable
  • setZIndex
  • remove
  • CIRCLE_CLICK

• [-] Polyline

  • map.addPolyline (@quanganh206)
  • setPoints
  • getPoints
  • setGeodesic
  • setVisible
  • setClickable
  • setStrokeColor
  • setStrokeWidth
  • setZIndex
  • remove
  • POLYLINE_CLICK

• Polygone

  • map.addPolygon
  • setPoints
  • getPoints
  • setPoints
  • getHoles
  • setFillColor
  • setStrokeColor
  • setClickable
  • setVisible
  • setZIndex
  • remove
  • POLYGON_CLICK

• GroundOverlay

  • map.addGroundOverlay (@wf9a5m75)
  • setBounds (@wf9a5m75)
  • setBearing (@wf9a5m75)
  • setImage
  • setOpacity (@wf9a5m75)
  • setClickable
  • setZIndex
  • remove (@wf9a5m75)
  • GROUND_OVERLAY_CLICK (@wf9a5m75)

• HtmlInfoWindow (@wf9a5m75)

  • new HtmlInfoWindow (@wf9a5m75)
  • setContent (@wf9a5m75)
  • setBackgroundColor (@wf9a5m75)
  • open (@wf9a5m75)
  • close (@wf9a5m75)

• TileOverlay (@wf9a5m75)

  • map.addTileLayer (@wf9a5m75)
  • setFadeIn (@wf9a5m75)
  • setZIndex (@wf9a5m75)
  • setOpacity (@wf9a5m75)
  • setVisible (@wf9a5m75)
  • remove (@wf9a5m75)

• Geocoding (@ThorvaldAagaard)

  • geocoding
  • reverse_geocoding

• LocationService (@wf9a5m75)

  • getMyLocation

• Environment (@wf9a5m75)

  • setBackgroundColor (@wf9a5m75)
  • getLicenseInfo (@wf9a5m75)

• encoding (@wf9a5m75)

  • encodePath (@wf9a5m75)
  • decodePath (@wf9a5m75)

• spherical (@wf9a5m75)

  • computeDistanceBetween (@wf9a5m75)
  • computeOffset (@wf9a5m75)
  • computeOffsetOrigin (@wf9a5m75)
  • computeLength (@wf9a5m75)
  • computeArea (@wf9a5m75)
  • computeSignedArea (@wf9a5m75)
  • computeHeading (@wf9a5m75)
  • interpolate (@wf9a5m75)

• poly (@wf9a5m75)

  • containsLocation (@wf9a5m75)
  • isLocationOnEdge (@wf9a5m75)