I'm really happy to introduce the new KmlOverlay! It supports much more tags than the previous maps plugin v1.4.0.
Supported tags are:
| kml | folder | placemark | document | multigeometry |
| photooverlay | point | polygon | linestring | groundoverlay |
| networklink (<region> is also supported) | lookat | extendeddata | schema | styles |
| balloonstyle (<description> only) | iconstyle | styleurl | stylemap (normal mode only) | coordinates |
Regarding of <ExtendedData> tag, if the kml file contains <BaloonStyle> tag as template,
the maps plugin v2.2.0 displays just like defined. Otherwise, draw a table like below.
The usage is really easy.
map.addKmlOverlay({
'url': (KML file path or URL), // <-- .KMZ file is not supported yet!
'clickable': true,
'suppressInfoWindows': false
}, function(kmlOverlay) {
// debug
//console.log(kmlOverlay.getKmlData());
// You can get additional information
//kmlOverlay.on(plugin.google.maps.event.KML_CLICK, function(overlay, latLng) {
// console.log(overlay);
//});
// You need to change the camera by yourself.
map.moveCamera(kmlOverlay.camera, function() {
//close the dialog
mapDiv.removeChild(dialogDiv);
});
});
You still can get data from other tags that are not listed in the above table. The new KML parser returns all tag elements.
You should no longer face the non-clickable Google Maps problem!
The maps plugin v2.2.0 implements correct HTML hierarchy calculation algorithm.
It means if you open an HTML dialog over the map, you don't need to execute map.setClickable(false).
The maps plugin detects it correctly.
This is of great benefit to users who use JS frameworks, such as ionic or framework7.
Because these frameworks support multipage mechanisms in varying ways.
Also the DOM inspection performance has been improved significantly.
The maps plugin v2.2.0 implements a new way to detect the DOM hierarchy,
the plugin uses MutableObserver. Because of this, it no longer supports Android 4.3 or lower versions.
The maps plugin v2.2.0 makes map positioning better than ever before.
In the past, you can not click on other plugins such as DatePicker. Because these plugins insert their own native views under the browser view. But this problem was fixed at this version.
You can get the location through LocationService static class.
// Get the current device location "without map"
var option = {
enableHighAccuracy: true // use GPS as much as possible
};
plugin.google.maps.LocationService.getMyLocation(option, function(location) {
// Create a map with the device location
var mapDiv = document.getElementById('map_canvas');
var map = plugin.google.maps.Map.getMap(mapDiv, {
'camera': {
target: location.latLng,
zoom: 16
}
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
// Add a marker
var text = ["Current your location:\n",
"latitude:" + location.latLng.lat.toFixed(3),
"longitude:" + location.latLng.lng.toFixed(3),
"speed:" + location.speed,
"time:" + location.time,
"bearing:" + location.bearing].join("\n");
map.addMarker({
title: text,
position: location.latLng
}, function(marker) {
marker.showInfoWindow();
});
});
});
This is really important announce. You set controls.myLocation = true when you want to display the current location (aka, blue dot);
Until the maps plugin v2.1.1, the plugin displays/hides both the blue dot and the myLocation button together.
Because the Google Maps Android API v2 implements so like that.
However, I figured out a way to control them separately.
From the maps plugin v2.2.0, you can hide the myLocationButton but display the blue dot.
How about the opposite case? Yes, it's possible.
In this case, if you tap on the myLocation button, the map does not do anything because myLocation = false. But you can get the event with MY_LOCATION_BUTTON_CLICK event.
map.on(plugin.google.maps.event.MY_LOCATION_BUTTON_CLICK, function() {
alert("The my location button is clicked.");
});When you tap on POIs, you can get the information.
map.on(plugin.google.maps.event.POI_CLICK, function(placeId, name, latLng) {
map.addMarker({
'position': latLng,
'title': [
"placeId = " + placeId,
"name = " + name,
"position = " + latLng.toUrlValue()
].join("\n")
}, function(marker) {
marker.showInfoWindow();
});
});
You can listen the MY_LOCATION_CLICK event.
This event is fired when you tap on the blue dot.
map.on(plugin.google.maps.event.MY_LOCATION_CLICK, function(location) {
map.addMarker({
'title': ["Current your location:\n",
"latitude:" + location.latLng.lat.toFixed(3),
"longitude:" + location.latLng.lng.toFixed(3),
"speed:" + location.speed,
"time:" + location.time,
"bearing:" + location.bearing].join("\n"),
'position': location.latLng,
'animation': plugin.google.maps.Animation.DROP,
'disableAutoPan': true
}, function(marker) {
marker.showInfoWindow();
});
});
Useful methods are added to BaseArrayClass.
You can specify the SDK version of Google Play Services.
Note that the maps plugin v2.2.0 requires the Google Play Services v11.8.0 or newer.
Example using the Cordova CLI
$> cordova plugin add cordova-plugin-googlemaps \
--variable API_KEY_FOR_ANDROID="..." \
--variable API_KEY_FOR_IOS="..." \
--variable PLAY_SERVICES_VERSION="11.8.0"Example using config.xml
<plugin name="cordova-plugin-googlemaps" spec="2.2.0">
<variable name="API_KEY_FOR_ANDROID" value="YOUR_ANDROID_API_KEY_IS_HERE" />
<variable name="API_KEY_FOR_IOS" value="YOUR_IOS_API_KEY_IS_HERE" />
<variable name="PLAY_SERVICES_VERSION" value="11.8.0" />
</plugin>Even if you want to use this event, you can still listen like this:
markerCluster.on('cluster_click', function() {
...
});
This event is removed completely.
