Google Maps native SDK for Android and iOS, and Google Maps JavaScript API v3 for browser.
npm install eeft-plugin-googlemaps
Android, iOS
|
Browser
|
$> cordova plugin add cordova-plugin-googlemaps
`
Then set your Google Maps API keys into your config.xml (Android / iOS).
`xml
`
For browser platform,
`js
// If your app runs this program on browser,
// you need to set API_KEY_FOR_BROWSER_RELEASE and API_KEY_FOR_BROWSER_DEBUG
// before plugin.google.maps.Map.getMap()
//
// API_KEY_FOR_BROWSER_RELEASE for https: protocol
// API_KEY_FOR_BROWSER_DEBUG for http: protocol
//
plugin.google.maps.environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': '(YOUR_API_KEY_IS_HERE)',
'API_KEY_FOR_BROWSER_DEBUG': '' // optional
});
// Create a Google Maps native view under the map_canvas div.
var map = plugin.google.maps.Map.getMap(div);
`
PhoneGap Build settings
`xml
`
Install optional variables (config.xml)
-  GOOGLE_MAPS_PLAY_SERVICES_VERSION = (16.0.1)
The Google Play Services SDK version.
_You need to specify the same version number with all other plugins._
Check out the latest version here.
-  ANDROID_SUPPORT_V4_VERSION = (27.1.1)
This plugin requires the Android support library v4.
_The minimum version is 24.1.0._
Check out the latest version here.
-  LOCATION_WHEN_IN_USE_DESCRIPTION
This message is displayed when your application requests LOCATION PERMISSION for only necessary times.
-  LOCATION_ALWAYS_USAGE_DESCRIPTION
This message is displayed when your application requests LOCATION PERMISSION for always.
---------------------------------------------------------------------------------------------------------
Please support this plugin activity.
In order to keep this plugin as free, please consider to donate little amount for this project.

---------------------------------------------------------------------------------------------------------
Release Notes
- v2.7.1
- Fix: (iOS) UiWebView references present in v2.7.0
- v2.7.0
- Re-adoption: cordova-plugin-googlemaps-sdk dependency
- Important update: No longer support UIWebView on iOS. WKWebView only.
- Fix: (iOS) Can't load image files from local host on ionic 4 / 5
- Update: (Android) prevent null pointer error in AsyncLoadImage.java
- Fix: Css animation interference when call setDiv and there is a push/pop page
- Fix: (Android/iOS/Browser) KML parser crash
- Fix: flickering and wrong rendering of some DOM elements
- Add: map.stopAnimation()
- Fix: can't remove map while map.animateCamera() is running
- Update: (Android) Increase cache memory size
- Update: (Android/iOS) Danish localization
- Fix: (Android) Prevent resize event after map.setDiv(null)
- Fix: (Android/iOS) Can not interactive with the map inside similar to the Google Maps JavaScript API v3.
Feature comparison table
| | Google Maps JavaScript API v3 | Cordova-Plugin-GoogleMaps(Android,iOS)| Cordova-Plugin-GoogleMaps(Browser) |
|----------------|-----------------------------------|---------------------------------------|---------------------------------------|
|Rendering system| JavaScript + HTML | JavaScript + Native API's | JavaScript |
|Offline map | Not possible | Possible (only your displayed area) | Not possible |
|3D View | Not possible | Possible | Not possible |
|Platform | All browsers | Android and iOS applications only | All browsers |
|Tile image | Bitmap | Vector | Bitmap |
Class comparison table
| Google Maps JavaScript API v3 | Cordova-Plugin-GoogleMaps |
|-----------------------------------|---------------------------------------|
| google.maps.Map | Map |
| google.maps.Marker | Marker |
| google.maps.InfoWindow | Default InfoWindow, and HtmlInfoWindow|
| google.maps.Circle | Circle |
| google.maps.Rectangle | Polygon |
| google.maps.Polyline | Polyline |
| google.maps.Polygon | Polygon |
| google.maps.GroundOverlay | GroundOverlay |
| google.maps.ImageMapType | TileOverlay |
| google.maps.MVCObject | BaseClass |
| google.maps.MVCArray | BaseArrayClass |
| google.maps.Geocoder | plugin.google.maps.geocoder |
| google.maps.geometry.spherical | plugin.google.maps.geometry.spherical |
| google.maps.geometry.encoding | plugin.google.maps.geometry.encoding |
| google.maps.geometry.poly | plugin.google.maps.geometry.poly |
| (not available) | MarkerCluster |
| google.maps.KmlLayer | KmlOverlay |
| (not available) | LocationService |
| google.maps.StreetView | StreetView :sparkles: |
| google.maps.Data | (not available) |
| google.maps.DirectionsService | (not available) |
| google.maps.DistanceMatrixService | (not available) |
| google.maps.TransitLayer | (not available) |
| google.maps.places.* | (not available) |
| google.maps.visualization.* | (not available) |
$3
This plugin generates native map views, and puts them under the browser.
The map views are not HTML elements. This means that they are not a or anything HTML related.
But you can specify the size and position of the map view using its containing .
This plugin changes the background to transparent in your application.
Then the plugin detects your touch position, which is either meant for the native map or an html element`