Creating PluginKmlOverlay.js
MODIFY
plugin.xml
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
-<plugin id="cordova-plugin-googlemaps" version="2.3.12-ext-20180820-1821" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+<plugin id="cordova-plugin-googlemaps" version="2.3.12-ext-20180820-1904" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>cordova-plugin-googlemaps</name>
<js-module name="BaseClass" src="www/BaseClass.js">
<runs/>
<js-module name="PluginGeocoder" src="src/browser/PluginGeocoder.js">
<runs/>
</js-module>
+ <js-module name="fromXML" src="src/browser/fromXML.js">
+ <runs/>
+ </js-module>
</platform>
</plugin>

MODIFY
src/browser/PluginKmlOverlay.js
src/browser/PluginKmlOverlay.js
var utils = require('cordova/utils'),
event = require('cordova-plugin-googlemaps.event'),
BaseClass = require('cordova-plugin-googlemaps.BaseClass'),
- LatLng = require('cordova-plugin-googlemaps.LatLng');
+ fromXML = require('cordova-plugin-googlemaps.fromXML');
function PluginKmlOverlay(pluginMap) {
var self = this;
@@ -22,188 +22,50 @@ PluginKmlOverlay.prototype._create = function(onSuccess, onError, args) {
markerId = 'marker_' + args[2],
pluginOptions = args[1];
- var markerOpts = {
- 'overlayId': markerId,
- 'position': pluginOptions.position,
- 'map': map,
- 'disableAutoPan': pluginOptions.disableAutoPan === true,
- 'draggable': pluginOptions.draggable === true
- };
- var iconSize = null;
- if (pluginOptions.animation) {
- markerOpts.animation = google.maps.Animation[pluginOptions.animation.toUpperCase()];
- }
- if (pluginOptions.icon) {
- var icon = pluginOptions.icon;
- markerOpts.icon = {};
- if (typeof pluginOptions.icon === 'string') {
- // Specifies path or url to icon image
- markerOpts.icon = pluginOptions.icon;
- } else if (typeof pluginOptions.icon === 'object') {
- if (Array.isArray(pluginOptions.icon.url)) {
- // Specifies color name or rule
- markerOpts.icon = {
- 'path': 'm12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z',
- 'fillColor': 'rgb(' + pluginOptions.icon.url[0] + ',' + pluginOptions.icon.url[1] + ',' + pluginOptions.icon.url[2] + ')',
- 'fillOpacity': pluginOptions.icon.url[3] / 256,
- 'scale': 1.3,
- 'strokeWeight': 0,
- 'anchor': new google.maps.Point(12, 27)
- };
- iconSize = {
- 'width': 22,
- 'height': 28
- };
+ (new Promise(function(resolve, reject) {
+ var xhr = createCORSRequest('GET', pluginOptions.url, true);
+ if (xhr) {
+ xhr.onreadystatechange = function() {
+ try {
+ if (xhr.readyState === XMLHttpRequest.DONE) {
+ if (xhr.status === 200) {
+ resolve(xhr.responseText);
} else {
- markerOpts.icon.url = pluginOptions.icon.url;
- if (pluginOptions.icon.size) {
- markerOpts.icon.scaledSize = new google.maps.Size(icon.size.width, icon.size.height);
- iconSize = icon.size;
- }
+ reject(xhr);
}
}
-
- if (icon.anchor) {
- markerOpts.icon.anchor = new google.maps.Point(icon.anchor[0], icon.anchor[1]);
+ } catch (e) {
+ reject(e.description);
}
- }
- if (!markerOpts.icon ||
- !markerOpts.icon.url && !markerOpts.icon.path) {
- // default marker
- markerOpts.icon = {
- 'path': 'm12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z',
- 'fillColor': 'rgb(255, 0, 0)',
- 'fillOpacity': 1,
- 'scale': 1.3,
- 'strokeWeight': 0,
- 'anchor': new google.maps.Point(12, 27)
- };
- iconSize = {
- 'width': 22,
- 'height': 28
};
- }
- var marker = new google.maps.Marker(markerOpts);
- marker.addListener('click', self._onMarkerEvent.bind(self, marker, event.MARKER_CLICK));
- marker.addListener('dragstart', self._onMarkerEvent.bind(self, marker, event.MARKER_DRAG_START));
- marker.addListener('drag', self._onMarkerEvent.bind(self, marker, event.MARKER_DRAG));
- marker.addListener('dragend', self._onMarkerEvent.bind(self, marker, event.MARKER_DRAG_END));
-
- if (pluginOptions.title || pluginOptions.snippet) {
- var html = [];
- if (pluginOptions.title) {
- html.push(pluginOptions.title);
- }
- if (pluginOptions.snippet) {
- html.push('<small>' + pluginOptions.snippet + '</small>');
- }
- marker.set('content', html.join('<br>'));
- marker.addListener('click', onMarkerClick);
- }
-
- self.pluginMap.objects[markerId] = marker;
- self.pluginMap.objects['marker_property_' + markerId] = markerOpts;
-
- if (iconSize) {
- onSuccess({
- 'id': markerId,
- 'width': iconSize.width,
- 'height': iconSize.height
- });
- } else {
- var img = new Image();
- img.onload = function() {
- console.log(markerId, img.width, img.height);
- onSuccess({
- 'id': markerId,
- 'width': img.width,
- 'height': img.height
- });
- };
- img.onerror = function() {
- onSuccess({
- 'id': markerId,
- 'width': 20,
- 'height': 42
+ xhr.send();
+ }
+ }))
+ .then(function(result) {
+ console.log(fromXML(result));
+ })
+ .catch(function(error) {
+ console.error(error);
});
- };
- if (typeof markerOpts.icon === "string") {
- img.src = markerOpts.icon;
- } else {
- img.src = markerOpts.icon.url;
- }
- }
-};
-PluginKmlOverlay.prototype.setTitle = function(onSuccess, onError, args) {
- var self = this;
- var overlayId = args[0];
- var title = args[1];
- var marker = self.pluginMap.objects[overlayId];
- marker.set('content', title);
- onSuccess();
-};
-PluginKmlOverlay.prototype.showInfoWindow = function(onSuccess, onError, args) {
- var self = this;
- var overlayId = args[0];
- var marker = self.pluginMap.objects[overlayId];
- if (marker) {
- onMarkerClick.call(marker);
- }
- onSuccess();
-};
-PluginKmlOverlay.prototype.setPosition = function(onSuccess, onError, args) {
- var self = this;
- var overlayId = args[0];
- var marker = self.pluginMap.objects[overlayId];
- if (marker) {
- marker.setPosition({'lat': args[1], 'lng': args[2]});
- }
- onSuccess();
};
-PluginKmlOverlay.prototype.remove = function(onSuccess, onError, args) {
- var self = this;
- var overlayId = args[0];
- var marker = self.pluginMap.objects[overlayId];
- if (marker) {
- google.maps.event.clearInstanceListeners(marker);
- marker.setMap(null);
- marker = undefined;
- self.pluginMap.objects[overlayId] = undefined;
- delete self.pluginMap.objects[overlayId];
- }
- onSuccess();
-};
-
-PluginKmlOverlay.prototype._onMarkerEvent = function(marker, evtName) {
- var self = this,
- mapId = self.pluginMap.id;
-console.log(mapId, evtName);
- if (mapId in plugin.google.maps) {
- var latLng = marker.getPosition();
- plugin.google.maps[mapId]({
- 'evtName': evtName,
- 'callback': '_onMarkerEvent',
- 'args': [marker.overlayId, new LatLng(latLng.lat(), latLng.lng())]
- });
- }
-
-};
module.exports = PluginKmlOverlay;
-var infoWnd = null;
-function onMarkerClick() {
- if (!infoWnd) {
- infoWnd = new google.maps.InfoWindow();
+function createCORSRequest(method, url, asynch) {
+ var xhr = new XMLHttpRequest();
+ if ("withCredentials" in xhr) {
+ // XHR for Chrome/Firefox/Opera/Safari.
+ xhr.open(method, url, true);
+ // xhr.setRequestHeader('MEDIBOX', 'login');
+ // xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+ } else if (typeof XDomainRequest != "undefined") {
+ // XDomainRequest for IE.
+ xhr = new XDomainRequest();
+ xhr.open(method, url, asynch);
+ } else {
+ // CORS not supported.
+ xhr = null;
}
- var marker = this;
- var maxWidth = marker.getMap().getDiv().offsetWidth * 0.7;
- var content = marker.get('content');
- infoWnd.setOptions({
- content: content,
- disableAutoPan: marker.disableAutoPan,
- maxWidth: maxWidth
- });
- infoWnd.open(marker.getMap(), marker);
+ return xhr;
}

ADD
src/browser/fromXML.js
+ // https://github.com/kawanet/from-xml
+//
+// The MIT License (MIT)
+//
+// Copyright (c) 2016 Yusuke Kawasaki
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+/**
+ * The fromXML() method parses an XML string, constructing the JavaScript
+ * value or object described by the string.
+ *
+ * @function fromXML
+ * @param text {String} The string to parse as XML
+ * @param [reviver] {Function} If a function, prescribes how the value
+ * originally produced by parsing is transformed, before being returned.
+ * @returns {Object}
+ */
+
+var fromXML;
+
+var UNESCAPE = {
+ "&amp;": "&",
+ "&lt;": "<",
+ "&gt;": ">",
+ "&apos;": "'",
+ "&quot;": '"'
+};
+
+var ATTRIBUTE_KEY = "@";
+var CHILD_NODE_KEY = "#";
+
+module.exports = fromXML = _fromXML;
+
+function _fromXML(text, reviver) {
+ return toObject(parseXML(text), reviver);
+}
+
+function parseXML(text) {
+ var list = String.prototype.split.call(text, /<([^!<>?](?:'[\S\s]*?'|"[\S\s]*?"|[^'"<>])*|!(?:--[\S\s]*?--|\[[^\[\]'"<>]+\[[\S\s]*?]]|DOCTYPE[^\[<>]*?\[[\S\s]*?]|(?:ENTITY[^"<>]*?"[\S\s]*?")?[\S\s]*?)|\?[\S\s]*?\?)>/);
+ var length = list.length;
+
+ // root element
+ var root = {f: []};
+ var elem = root;
+
+ // dom tree stack
+ var stack = [];
+
+ for (var i = 0; i < length;) {
+ // text node
+ var str = list[i++];
+ if (str) appendText(str);
+
+ // child node
+ var tag = list[i++];
+ if (tag) parseNode(tag);
+ }
+
+ return root;
+
+ function parseNode(tag) {
+ var tagLength = tag.length;
+ var firstChar = tag[0];
+ if (firstChar === "/") {
+ // close tag
+ var closed = tag.replace(/^\/|[\s\/].*$/g, "").toLowerCase();
+ while (stack.length) {
+ var tagName = elem.n && elem.n.toLowerCase();
+ elem = stack.pop();
+ if (tagName === closed) break;
+ }
+ } else if (firstChar === "?") {
+ // XML declaration
+ appendChild({n: "?", r: tag.substr(1, tagLength - 2)});
+ } else if (firstChar === "!") {
+ if (tag.substr(1, 7) === "[CDATA[" && tag.substr(-2) === "]]") {
+ // CDATA section
+ appendText(tag.substr(8, tagLength - 10));
+ } else {
+ // comment
+ appendChild({n: "!", r: tag.substr(1)});
+ }
+ } else {
+ var child = openTag(tag);
+ appendChild(child);
+ if (tag[tagLength - 1] === "/") {
+ child.c = 1; // emptyTag
+ } else {
+ stack.push(elem); // openTag
+ elem = child;
+ }
+ }
+ }
+
+ function appendChild(child) {
+ elem.f.push(child);
+ }
+
+ function appendText(str) {
+ str = removeSpaces(str);
+ if (str) appendChild(unescapeXML(str));
+ }
+}
+
+function openTag(tag) {
+ var elem = {f: []};
+ tag = tag.replace(/\s*\/?$/, "");
+ var pos = tag.search(/[\s='"\/]/);
+ if (pos < 0) {
+ elem.n = tag;
+ } else {
+ elem.n = tag.substr(0, pos);
+ elem.t = tag.substr(pos);
+ }
+ return elem;
+}
+
+function parseAttribute(elem, reviver) {
+ if (!elem.t) return;
+ var list = elem.t.split(/([^\s='"]+(?:\s*=\s*(?:'[\S\s]*?'|"[\S\s]*?"|[^\s'"]*))?)/);
+ var length = list.length;
+ var attributes, val;
+
+ for (var i = 0; i < length; i++) {
+ var str = removeSpaces(list[i]);
+ if (!str) continue;
+
+ if (!attributes) {
+ attributes = {};
+ }
+
+ var pos = str.indexOf("=");
+ if (pos < 0) {
+ // bare attribute
+ str = ATTRIBUTE_KEY + str;
+ val = null;
+ } else {
+ // attribute key/value pair
+ val = str.substr(pos + 1).replace(/^\s+/, "");
+ str = ATTRIBUTE_KEY + str.substr(0, pos).replace(/\s+$/, "");
+
+ // quote: foo="FOO" bar='BAR'
+ var firstChar = val[0];
+ var lastChar = val[val.length - 1];
+ if (firstChar === lastChar && (firstChar === "'" || firstChar === '"')) {
+ val = val.substr(1, val.length - 2);
+ }
+
+ val = unescapeXML(val);
+ }
+ if (reviver) {
+ val = reviver(str, val);
+ }
+ addObject(attributes, str, val);
+ }
+
+ return attributes;
+}
+
+function removeSpaces(str) {
+ return str && str.replace(/^\s+|\s+$/g, "");
+}
+
+function unescapeXML(str) {
+ return str.replace(/(&(?:lt|gt|amp|apos|quot|#(?:\d{1,6}|x[0-9a-fA-F]{1,5}));)/g, function(str) {
+ if (str[1] === "#") {
+ var code = (str[2] === "x") ? parseInt(str.substr(3), 16) : parseInt(str.substr(2), 10);
+ if (code > -1) return String.fromCharCode(code);
+ }
+ return UNESCAPE[str] || str;
+ });
+}
+
+function toObject(elem, reviver) {
+ if ("string" === typeof elem) return elem;
+
+ var raw = elem.r;
+ if (raw) return raw;
+
+ var attributes = parseAttribute(elem, reviver);
+ var object;
+ var childList = elem.f;
+ var childLength = childList.length;
+
+ if (attributes || childLength > 1) {
+ // merge attributes and child nodes
+ object = attributes || {};
+ childList.forEach(function(child) {
+ if ("string" === typeof child) {
+ addObject(object, CHILD_NODE_KEY, child);
+ } else {
+ addObject(object, child.n, toObject(child, reviver));
+ }
+ });
+ } else if (childLength) {
+ // the node has single child node but no attribute
+ var child = childList[0];
+ object = toObject(child, reviver);
+ if (child.n) {
+ var wrap = {};
+ wrap[child.n] = object;
+ object = wrap;
+ }
+ } else {
+ // the node has no attribute nor child node
+ object = elem.c ? null : "";
+ }
+
+ if (reviver) {
+ object = reviver(elem.n || "", object);
+ }
+
+ return object;
+}
+
+function addObject(object, key, val) {
+ if ("undefined" === typeof val) return;
+ var prev = object[key];
+ if (prev instanceof Array) {
+ prev.push(val);
+ } else if (key in object) {
+ object[key] = [prev, val];
+ } else {
+ object[key] = val;
+ }
+}

Creating PluginKmlOverlay.js