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: Clone this project into your machine
$> git clone https://github.com/wf9a5m75/ionic-googlemaps-demo
$> cd ionic-google-maps
STEP-2: Open the config.xml, then replace the Maps API keys
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
<plugin name="cordova-plugin-googlemaps" spec="https://github.com/wf9a5m75/ionic-googlemaps-demo">
<variable name="API_KEY_FOR_ANDROID" value="(REPLACE_WITH_YOUR_KEY)" />
<variable name="API_KEY_FOR_IOS" value="(REPLACE_WITH_YOUR_KEY)" />
</plugin>
STEP-3: Install
$> ionic cordova platform add android (or ios)
$> npm install @ionic-native/googlemaps
STEP-4: Run
It should work.
$> ionic cordova run android -l
STEP-5: 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.
NOTE: Make sure you are using latest ionic cli version.
$> npm install -g ionic@latest
$> git clone https://github.com/wf9a5m75/ionic-native
$> git checkout dev
$> cd ionic-googlemaps-demo
$> npm uninstall @ionic-native/core @ionic-native/google-maps
$> npm install (path to)/ionic-native/dist/\@ionic-native/core --no-fetch
$> npm install (path to)/ionic-native/dist/\@ionic-native/google-maps --no-fetch
$> ionic cordova run
You may get some warning, but you can ignore these messages.
$> npm install (path to)/ionic-native/dist/@ionic-native/google-maps --no-fetch
[email protected] (path to)/ionic-googlemaps-demo
????????? UNMET PEER DEPENDENCY @ionic-native/[email protected]
????????? @ionic-native/[email protected]
npm WARN @ionic-native/[email protected] requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN @ionic-native/[email protected] requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN [email protected] requires a peer of ajv@>=5.0.0 but none was installed.
After finish fixing bugs, please commit to the https://github.com/wf9a5m75/ionic-native
Because I already sent a pull request to the original ionic-native repo. If you commit the code to the https://github.com/wf9a5m75/ionic-native, an automatic code review is executed at the pull request page.
Pull request #1834 Fix: Google Maps Doc page
[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 (@wf9a5m75)
- setCompassEnabled (@wf9a5m75)
- setAllGesturesEnabled (@wf9a5m75)
- setVisible (@wf9a5m75)
- setPadding (@wf9a5m75)
- setOptions (@wf9a5m75)
- toDataURL (@wf9a5m75)
- MAP_CLICK (@wf9a5m75)
- MAP_LONG_CLICK (@wf9a5m75)
- MY_LOCATION_BUTTON_CLICK (@wf9a5m75)
- CAMERA_EVENTS (@wf9a5m75)
- MAP_DRAG_EVENTS (@wf9a5m75)
- MAP_READY (@wf9a5m75)
-
Marker
- map.addMarker
- 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 (@pavel-kurnosov)
- setFlat (@pavel-kurnosov)
- setIcon
-
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 (@quanganh206)
- POLYLINE_CLICK
-
Polygone
- map.addPolygon
- setPoints
- getPoints
- setPoints
- getHoles
- setFillColor
- setStrokeColor
- setClickable
- setVisible
- setZIndex
- remove
- POLYGON_CLICK
-
GroundOverlay
-
map.addGroundOverlay
- setBounds
- setBearing
- setImage
- setOpacity
- setClickable
- setZIndex
- remove
- GROUND_OVERLAY_CLICK
-
HtmlInfoWindow (@dasois)
- new HtmlInfoWindow
- setContent
- setBackgroundColor
- open
- close
-
TileOverlay
- map.addTileLayer
- setFadeIn
- setZIndex
- setOpacity
- setVisible
- remove
-
Geocoding (@ThorvaldAagaard)
- geocoding
- reverse_geocoding
-
Environment
- setBackgroundColor
- getLicenseInfo
-
encoding
- encodePath
- decodePath